Site Search:

How to create a multiple choice question template in 5 minutes

<Back

Well, copy/paste the the code to post's HTML takes 5 seconds. Modifying it might take more than 5 minutes.

Example page.

<script>

function setCookie(cname,cvalue,exdays) {
    cname = 'xyz-' + cname;
    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');
    if (h0 != "" && m0 != "" && s0 != "" && tm != "") {
       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) {
          document.getElementById('txt').innerHTML = "No time left";
       } else {
          document.getElementById('txt').innerHTML = ml + " minutes and " + sl + " seconds left";
       }
         
    } else {
       document.getElementById('txt').innerHTML = "You should start the test properly and answer all questions in one session.";
    }  
}

function getCookie(cname) {
    cname = 'xyz-' + 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);
    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, value, 30);

    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', '40', 30);
}
</script>

<a href="http://xyzcode.blogspot.com/2017/01/ocpjp-assessment-test.html">Question List</a><br />
<br />
<button onclick="spentTime()">Time Left</button>
<br />
<div id="txt">
</div>
<br />
Question:<br />
<br />
description<br />
<br />
<div class="code">
code
</div>
<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 onclick="getChoices('atq2')">Submit</button>
<br />
<br />
<a href="http://xyzcode.blogspot.com/2017/01/assessment-test-question-3.html">Next Question</a><br />
<br />
<br />
<button onclick="document.getElementById('answernode').style.display='block'">Answer</button>
<button onclick="showChoices('atq2')">You answered</button>
<br />
<div id="chosen">
</div>
<br />
<div id="answernode" style="display: none;">
Answer:<br />
<br />
Explain:<br />
<br />
Study:</div>
<br />
<br />