How to Create dynamic tests in 5 minutes

<Back

copy paste the source code took 5 minutes, sort out details took 5 hours
example:
test index


Create many blogger post pages with url only differ in one number (Notice the max post per day limit), they will be the leaf pages in this project.

step 1. create an index page, store the next question for each leaf page.

<style>
#id:link, #id:visited {
    background-color: green;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}


#id:hover, #id:active {
    background-color: Aqua;
}
</style>

<script>

function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}


function count() {
    var questions = ["1", "6", "2", "4", "7"];
    var answers = ["B,H,", "A,E,", "C,", "B,F,", "C,"];
    var num = questions.length;
    var score = 0;
    for (i = 1; i <= num; i++) {
        var answer=getCookie('xyz-atq'+i);
        if (answer != "" && answers[i - 1] == answer) {
           score = score + 1;
           document.getElementById("check"+i).innerHTML = 'V';
           document.getElementById("check"+i).style.color = 'green';
        } else {
           document.getElementById("check"+i).innerHTML = 'X';
           document.getElementById("check"+i).style.color = 'red';
        }
    }
    document.getElementById("scoreboard").innerHTML = score + ' correct answers out of total 20 questions. your rate is ' + (score*100)/20 + ' %';
}

function init() {
    var questions = ["1", "6", "2", "4", "7"];
    var answers = ["B,H,", "A,E,", "C,", "B,F,", "C,"];
    var back = '2017/01/random-linkage-test-head.html'
    var num = questions.length;
    setCookie('xyz-atqqnum', num, 30);
    setCookie('xyz-atq-link', back, 30);
    document.getElementById('id').style.display='block';
    for (i = 1; i <= num; i++) {
        setCookie('xyz-atqid' + questions[i - 1], i + '-' + questions[i], 30);
        document.getElementById("link"+i).href="http://xyzcode.blogspot.com/2017/01/assessment-test-question-" + questions[i - 1] + ".html";
        if(i == num) {
           setCookie('xyz-atqid' + questions[i - 1], "", -30);  //mark the end
        }
        document.getElementById("check"+i).innerHTML = '';
    }
}
</script>


<br />
<div>
<a href="http://xyzcode.blogspot.com/2016/07/ocp-exam-1z0-809-breaks-down.html" target="">&lt;Back to OCPJP</a><br />
<br />
Click "Score" to score your previous test.<br />
<button onclick="count()">Score</button>
<br />
<div id="scoreboard">
</div>
<br />
Click "New Test" to Start a new test as timed and scored simulation test, your previous test score will be lost. Your browser need to allow cookie.<br />
<br />
<h3>
<button onclick="init()">Start New Test</button>&nbsp;</h3>
<div>
<br /></div>
<h3>
<a href="http://xyzcode.blogspot.com/2017/01/test-middle.html" id="id" style="display: none;">Enter</a></h3>
<br /></div>
<ol>
<li><div id="check1">
</div>
<a href="http://xyzcode.blogspot.com/2017/01/assessment-test-question-1.html" id="link1" target="_blank">Question 1</a></li>
<li><div id="check2">
</div>
<a href="http://xyzcode.blogspot.com/2017/01/assessment-test-question-2.html" id="link2" target="_blank">Question 2</a></li>
<li><div id="check3">
</div>
<a href="http://xyzcode.blogspot.com/2017/01/assessment-test-question-3.html" id="link3" target="_blank">Question 3</a></li>
<li><div id="check4">
</div>
<a href="http://xyzcode.blogspot.com/2017/01/assessment-test-question-4.html" id="link4" target="_blank">Question 4</a></li>
<li><div id="check5">
</div>
<a href="http://xyzcode.blogspot.com/2017/01/assessment-test-question-5.html" id="link5" target="_blank">Question 5</a></li>
</ol>

step 2. create many leaf pages, the page's url and the pages HTML content of only differ in qid

<div id="qid" style="display: nonexxxx;">7</div>

<script>
'use strict';
function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function spentTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    var h0=getCookie('xyz-atqtimeh');
    var m0=getCookie('xyz-atqtimem');
    var s0=getCookie('xyz-atqtimes');

    var tm=getCookie('xyz-atqtimetm');
    var sequence = getCookie('xyz-atqid' + document.getElementById('qid').innerHTML);
    var num = sequence.split('-')[0];
    var sum = getCookie('xyz-atqqnum');
 
    if (h0 != "" && m0 != "" && s0 != "" && tm != "" && num != "") {
       var time = (h - h0)*3600 + (m - m0)*60 + (s - s0);
       var minutes = Math.floor(time / 60);
       var seconds = time - minutes * 60;

       var ml = (tm - 1 - minutes);
       var sl = (60 - seconds);
       if (ml < 0 || ml > 150) {
          document.getElementById('txt').innerHTML = "No time left";
          document.getElementById('sub').disabled = true;
          document.getElementById('nextpage').style.display='none';
          document.getElementById('wrapper').style.display='block';
          document.getElementById('backlink').href="http://xyzcode.blogspot.com/" + getCookie('xyz-atq-link');
       } else {
          document.getElementById('txt').innerHTML = ml + " minutes and " + sl + " seconds left" + ". " + num + " of total " + sum + " questions answered.";
       }
         
    } else {
       document.getElementById('txt').innerHTML = "Go back to Question List and start new Test";
    }
}

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function showChoices(cname) {
    var answer=getCookie(cname + document.getElementById('qid').innerHTML);
    if (answer != "") {
       document.getElementById('chosen').innerHTML = "You have chosen: " + answer;
    } else {
       document.getElementById('chosen').innerHTML = "You didn't submit an answer.";
    }
}

function getChoices(cname) {
    var value = "";
    if (document.getElementById('A').checked) {
       value = value + "A,";
    }
    if(document.getElementById('B').checked) {
       value = value + "B,";
    }
    if(document.getElementById('C').checked) {
       value = value + "C,";
    }
    if(document.getElementById('D').checked) {
       value = value + "D,";
    }
    if(document.getElementById('E').checked) {
       value = value + "E,";
    }
    if(document.getElementById('F').checked) {
       value = value + "F,";
    }
    if(document.getElementById('G').checked) {
       value = value + "G,";
    }
    if(document.getElementById('H').checked) {
       value = value + "H,";
    }
    setCookie(cname + document.getElementById('qid').innerHTML, value, 30);
    var sequence = getCookie('xyz-atqid' + document.getElementById('qid').innerHTML);
    document.getElementById('nextpage').style.display='block';
    if(sequence != "") {
       var num = sequence.split('-')[1];
       document.getElementById('nextpage').href="http://xyzcode.blogspot.com/2017/01/assessment-test-question-" + num + ".html";
       num = parseInt(sequence.split('-')[0]) + 1;
       document.getElementById('nextpage').innerHTML = "Next Question (#" + num + ")";
    } else {
       document.getElementById('nextpage').href="http://xyzcode.blogspot.com/" + getCookie('xyz-atq-link');
       document.getElementById('nextpage').innerHTML = "Finish Test";
    }

}
</script>

<div id="wrapper" style="display: none;">
<a id="backlink" href="http://xyzcode.blogspot.com/2017/01/ocpjp-assessment-test.html">Question List</a>
</div>
<br />
<br />
<button onclick="spentTime()">Time Left</button>
<br />
<div id="txt">
</div>
<br />
Question:<br />
<br />
description<br />
<br />
<pre>code
</pre>
<br />
<br />
Choice:<br />
<input id="A" type="checkbox" value="A" />A. <br />
<input id="B" type="checkbox" value="B" />B.<br />
<input id="C" type="checkbox" value="C" />C.<br />
<input id="D" type="checkbox" value="D" />D.<br />
<input id="E" type="checkbox" value="E" />E.<br />
<input id="F" type="checkbox" value="F" />F.<br />
<input id="G" type="checkbox" value="G" />G.<br />
<input id="H" type="checkbox" value="H" />H.<br />
<br />
<button id="sub" onclick="getChoices('xyz-atq')">Submit</button>
<br />
<br />
<a id="nextpage" href="http://xyzcode.blogspot.com/2017/01/assessment-test-question-3.html" style="display: none; font-size: 20px;">Next Question</a><br />
<br />
<br />
<button onclick="document.getElementById('answernode').style.display='block'">Answer</button>
<button onclick="showChoices('xyz-atq')">You answered</button>
<br />
<div id="chosen">
</div>
<br />
<div id="answernode" style="display: nonexxxx;">
Answer:<br />
<br />
Explain:<br />
<br />
Study:</div>
<br />
<br />

Step 3. create a middle page for description and start timer

<style>
#id:link, #id:visited {
    background-color: green;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}


#id:hover, #id:active {
    background-color: Aqua;
}
</style>

<script>
function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function deleteCookies() {
    var num = 20;
    for (i = 1; i <= num; i++) {
        setCookie('xyz-atq'+i, "", -30);
    }
}

function startTimer() {
    deleteCookies();
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    setCookie('xyz-atqtimeh', h, 30);
    setCookie('xyz-atqtimem', m, 30);
    setCookie('xyz-atqtimes', s, 30);
    setCookie('xyz-atqtimetm', '45', 30);
    document.getElementById('txt').innerHTML = "You must finish answering the questions within 45 minutes, press Question 1 to start to test";
    document.getElementById('wrapper').style.display='block'
}
</script>
<br />
This assessment test have a time limit of 45 minutes, the total number of questions are 20.<br />
<br />
You can submit your answer multiple times, however, once you click "Next Question", you are not allowed to go back and change the answer. You can press the "Time Left" button any time to check how much time is left.<br />
<br />
<br />
<br />
<span style="color: red;">As a simulation test, you can press "Answer" button to cheat a question, but please don't do that.&nbsp;</span><br />
<span style="color: red;"><br /></span>
Press "Start" button to start the timer (once timer started, your previous test results will be lost.).<br />
<br />
<button onclick="startTimer()">Start</button>
<br />
<div id="txt">
</div>
<br />
<br />
<div id="wrapper" style="display: none;">
<a href="http://xyzcode.blogspot.com/2017/01/random-linkage-test.html" id="id">Question 1</a>
</div>
<br />
<br />

Done, now you can start to build contents.

In the future, the pages' HTML can be maintained by a OCPJP flavored java program.