<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title></title>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<style>
#quiz {display:flex;}
section {order:2}
textarea {vertical-align: top;}
.alpha {list-style:lower-alpha}
li {margin: 0 0 10px 20px}
.list-group-item-heading {margin-left:0}
/* When True/False checkbox is checked,
the following rulesets are invoked */
.tf:checked + ol > li:last-of-type, .tf:checked + ol > li:nth-of-type(3) {display:none;}
button, input[type=submit] {margin:0 0 10px 0}
</style>
</head>
<body>
<script>
var n = 0;
/* Fastest way to use .createElement() and
|| .appendChild() is to create a documentFragment,
|| append all elements to the fragment,
|| set attributes to the elements,
|| then append the documentFragment to the DOM
*/
var base = function(n) {
var frag = document.createDocumentFragment();
var quiz = document.createElement('form');
var sec = document.createElement('section');
var btn = document.createElement('button');
var sbt = document.createElement('input');
var fSet = document.createElement('fieldset');
var lgd = document.createElement('legend');
var ol = document.createElement('ol');
quiz.id = 'quiz';
quiz.classList.add('container','form-group-lg');
quiz.action = 'http://httpbin.org/post';
quiz.method = 'post';
quiz.target = 'view';
sec.className = 'col-md-6';
btn.id = 'add0';
btn.type = 'button';
btn.classList.add('btn','btn-primary','pull-right');
sbt.type = 'submit';
sbt.classList.add('btn','btn-success','pull-right');
btn.textContent = 'Add';
fSet.id = 'set0';
fSet.classList.add("form-group","col-md-6");
lgd.textContent = "Quiz Template";
ol.id = 'qa0';
ol.className = 'list-group';
frag.appendChild(quiz);
quiz.appendChild(sec);
fSet.appendChild(sbt);
fSet.appendChild(btn);
quiz.appendChild(fSet);
fSet.appendChild(lgd);
fSet.appendChild(ol);
document.body.appendChild(frag);
genQA(n, '#qa0');
/* .insertAdjacentHTML() is .innerHTML on steroids.
|| Use this for complex layouts and elements that
|| are heavy with attributes
*/
sec.insertAdjacentHTML('beforeend', "<iframe name='view' src='about:blank' width='100%' height='60%' frameborder='1'></iframe>");
}
var genQA = function(n, sel) {
var dock = document.querySelector(sel);
/* This is an ES6 Template Literal
|| It's a Literal String with a new powerful syntax:
|| Wrap - LS: in quotes ' or " | TL: wrap in backticks `
|| Variables - LS: ' + var + ' | TL: ${var}
|| 2+Lines - LS: + or \[enter] | TL: [enter]
*/
var cFields = `
<li class='list-group-item-heading'>
<textarea id='q${n}' name="q${n}" rows='3' cols='25'></textarea>
</li>
<label>True/False</label> <input class='tf checkbox-inline' type='checkbox'>
<ol class='list-group alpha'>
<li>
<input id="a${n}_1" name="a${n}_1" type="text" class="input-md" autocomplete="off">
</li>
<li>
<input id="a${n}_2" name="a${n}_2" type="text" class="input-md" autocomplete="off">
</li>
<li>
<input id="a${n}_3" name="a${n}_3" type="text" class="input-md" autocomplete="off">
</li>
<li>
<input id="a${n}_4" name="a${n}_4" type="text" class="input-md" autocomplete="off">
</li>
</ol>
<label id='a${n}' class='btn btn-info ans'>＋</label>
<hr>
`;
dock.insertAdjacentHTML('beforeend', cFields);
}
// Invoked once per session
base(n);
/* Referencing form and its form control fields
|| using HTMLFormControlFieldsCollection
*/
var form = document.forms[0];
var field = form.elements;
/* Register the click event on button#add0
|| invoke addQA() callback function
*/
field.add0.addEventListener('click', addQA);
// Simple callback to generate a QA and increment counter
function addQA(e) {
n++;
genQA(n, '#qa0');
}
/* Register the click event on fieldset#set0
|| invoke the callback function addA()
*/
field.set0.addEventListener('click', addA);
function addA(e) {
// if the node clicked has the .class '.ans'...
if(e.target.classList.contains('ans')) {
// Reference e.target by #id
var tgt = document.getElementById(e.target.id);
// Get the main index (the number in its #id)
var idx = parseInt(e.target.id.substring(1), 10);
// Find the <ol> sibling preceding it (older bro)
var list = tgt.previousElementSibling;
// Get the #id of the <ol>'s child's child element (grandkid)
var last = list.lastElementChild.lastElementChild.id;
// Get the last digit of its #id and increment it
var jdx = parseInt(last.split('_').pop(), 10)+1;
/* This is a Template Literal a list item and input with
|| interpolated #id and [name]
*/
var li = `<li><input id="a${idx}_${jdx}" name="a${idx}_${jdx}" type="text" class="input-md" autocomplete="off"></li>`;
// Append new list item to list
list.insertAdjacentHTML('beforeend', li);
}
return false;
}
</script>
</body>
</html>