/    Sign up×
Community /Pin to ProfileBookmark

How to make a javascript quiz to choose 10 random questions from 100 questions?

Copy linkTweet thisAlerts:
Nov 14.2013

[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>

<script LANGUAGE=”JavaScript”>
function scoreme()
{
<!–

var total=10
var correct=total;

sa01 = document.FXY1.NA01.value.toUpperCase(); sb01 = document.FXY1.NB01.value.toUpperCase();

if(sa01!=sb01) { document.FXY1.NB01.value=”INCORRECT!”; correct=correct-1;}

sa02 = document.FXY1.NA02.value.toUpperCase(); sb02 = document.FXY1.NB02.value.toUpperCase();
if(sa02!=sb02) { document.FXY1.NB02.value=”INCORRECT!”; correct=correct-1;}

sa03 = document.FXY1.NA03.value.toUpperCase(); sb03 = document.FXY1.NB03.value.toUpperCase();
if(sa03!=sb03) { document.FXY1.NB03.value=”INCORRECT!”; correct=correct-1;}

sa04 = document.FXY1.NA04.value.toUpperCase(); sb04 = document.FXY1.NB04.value.toUpperCase();
if(sa04!=sb04) { document.FXY1.NB04.value=”INCORRECT!”; correct=correct-1;}

sa05 = document.FXY1.NA05.value.toUpperCase(); sb05 = document.FXY1.NB05.value.toUpperCase();
if(sa05!=sb05) { document.FXY1.NB05.value=”INCORRECT!”; correct=correct-1;}

sa06 = document.FXY1.NA06.value.toUpperCase(); sb06 = document.FXY1.NB06.value.toUpperCase();
if(sa06!=sb06) { document.FXY1.NB06.value=”INCORRECT!”; correct=correct-1;}

sa07 = document.FXY1.NA07.value.toUpperCase(); sb07 = document.FXY1.NB07.value.toUpperCase();
if(sa07!=sb07) { document.FXY1.NB07.value=”INCORRECT!”; correct=correct-1;}

sa08 = document.FXY1.NA08.value.toUpperCase(); sb08 = document.FXY1.NB08.value.toUpperCase();
if(sa08!=sb08) { document.FXY1.NB08.value=”INCORRECT!”; correct=correct-1;}

sa09 = document.FXY1.NA09.value.toUpperCase(); sb09 = document.FXY1.NB09.value.toUpperCase();
if(sa09!=sb09) { document.FXY1.NB09.value=”INCORRECT!”; correct=correct-1;}

sa10 = document.FXY1.NA10.value.toUpperCase(); sb10 = document.FXY1.NB10.value.toUpperCase();
if(sa10!=sb10) { document.FXY1.NB10.value=”INCORRECT!”; correct=correct-1;}

document.FXY1.ovrXX.value=”You got ” + correct + ” out of ” + total + ” correct.”;

–>
}
</script>

</head>

<body>

<FONT face=arial>

<BR><BR><hr>
<FORM name=FXY1>

Question 1
<INPUT value=”answer1″ name=NA01 type=hidden><INPUT class=ipxa value=”” name=NB01 type=text size=15>
<BR><BR>

Question 2

<INPUT value=”answer2″ name=NA02 type=hidden><INPUT class=ipxa value=”” name=NB02 type=text size=15>
<BR><BR>

Question 3

<INPUT value=”answer3″ name=NA03 type=hidden><INPUT class=ipxa value=”” name=NB03 type=text size=15>
<BR><BR>

Question 4

<INPUT value=”answer4″ name=NA04 type=hidden><INPUT class=ipxa value=”” name=NB04 type=text size=15>
<BR><BR>

Question 5

<INPUT value=”answer5″ name=NA05 type=hidden><INPUT class=ipxa value=”” name=NB05 type=text size=15>
<BR><BR>

Question 6

<INPUT value=”answer6″ name=NA06 type=hidden><INPUT class=ipxa value=”” name=NB06 type=text size=15>
<BR><BR>

Question 7

<INPUT value=”answer7″ name=NA07 type=hidden><INPUT class=ipxa value=”” name=NB07 type=text size=15>,
<BR><BR>

Question 8

<INPUT value=”answer8″ name=NA08 type=hidden><INPUT class=ipxa value=”” name=NB08 type=text size=15>
<BR><BR>

Question 9

<INPUT value=”answer9″ name=NA09 type=hidden><INPUT class=ipxa value=”” name=NB09 type=text size=15>
<BR><BR>

Question 10

<INPUT value=”answer10″ name=NA10 type=hidden><INPUT class=ipxa value=”” name=NB10 type=text size=15>.

<BR><BR>

<INPUT value=”CHECK ALL” name=check type=button onclick=scoreme()> <INPUT class=ipxx value name=ovrXX type=text size=28>
</FORM>

<br></font>

</body>
</html>
[/CODE]

to post a comment
JavaScript

19 Comments(s) ↴

Copy linkTweet thisAlerts:
@alex05okauthorNov 14.2013 — This quiz have 10 question and are displayed 10 questions.

I want to make quiz with 100+ question and randomly display 10 question.

Thank you!
Copy linkTweet thisAlerts:
@JMRKERNov 14.2013 — Are all the questions of the style "fill-in-the-blank"? The user can see the correct response currently with just a right-click and "view source" action.

What are the correct responses for any of the questions? As it is, you have just hard-coded the questions and answers into the HTML.

How do you expect to have the 10 questions and answers formatted when they are chosen from a group of 100?

Will any of the questions be multiple-choice or matching? Will any have images associated with them?

How you design your script will depend upon some of these answers.

Have you searched this forum for many examples of how a quiz can be generated with random questions and checked against correct answers?
Copy linkTweet thisAlerts:
@alex05okauthorNov 14.2013 — Ty for trying to help me.

  • 1. yes

  • 2. i type them in <INPUT value="answer1" name=NA01 type=hidden><INPUT class=ipxa value="" name=NB01 type=text size=15>

  • 3. no


    • this is the sample of the code i write

    http://www.saiubesti.ro/download/quizenglish.html

    I whant to add more questions and answers and when i start the test to randomize only 10 question.
    Copy linkTweet thisAlerts:
    @alex05okauthorNov 14.2013 — I am a beginer in javascript so i want to make things as simple is posible. I dont care if is posible to "view source" because i use it in self education purpose.

    I want to have 10 random "fill-in-the-blank" questions (they are chosen randomly from a group of 100) when i press "Start" button.

    Also like the example above i need a score button.

    That is all i need.

    I tried many software but it's display only one question after another.

    Thank you for help!
    Copy linkTweet thisAlerts:
    @JMRKERNov 15.2013 — This is only a template of what kind of questions/responses you can create.

    Add more as needed. It currently is 25 questions with 5 randomly displayed at a time.

    It is my best guess as to your needs as you seem to not want to provide any examples.

    It can be contracted or expanded to pairs above and below 100.

    <i>
    </i>&lt;!DOCTYPE html&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;

    &lt;title&gt; Untitled &lt;/title&gt;
    &lt;script type="text/javascript"&gt;
    // For:
    // http://www.webdeveloper.com/forum/showthread.php?286477
    // -How-to-make-a-javascript-quiz-to-choose-10-random-questions-from-100-questions&amp;p=1296827#post1296827

    var QuesResp = [
    ['Dog','Cat'], ['King','Queen'], ['TV','Radio'], ['Flashlight','Candle'], ['Book','Tablet'],
    ['Desk','Chair'], ['Guitar','Banjo'],['Jester','Clown'], ['Coffee','Tea'], ['Coat','Pants'],
    ['Clock','Watch'], ['Rain','Snow'], ['Rats','Mice'], ['Tie','Scarf'], ['Hat','Cap'],
    ['Loafers','Wingtips'], ['Phamphlet','Magazine'], ['Cup','Pint'], ['Gallon','Liter'], ['Keyboard','Stylus'],
    ['Chair','Table'], ['Pen','Pencil'], ['Box','Circle'], ['Triangle','Rectangle'],['Gun','Knife'] // no comma after last entry
    ];
    &lt;/script&gt;

    &lt;/head&gt;
    &lt;body&gt;
    &lt;div id="QuestionsResponses"&gt;&lt;/div&gt;

    &lt;script type="text/javascript"&gt;
    var maxQues = 5;
    var QRpointers = [];

    function randOrd() { return (Math.round(Math.random())-0.5); } // quick and dirty randomizer (not the best)

    window.onload = function() {
    for (var i=0; i&lt;QuesResp.length; i++) { QRpointers.push(i); }
    QRpointers.sort(randOrd); // better randomizers are available

    var str = '&lt;h1&gt;Enter common associations&lt;/h1&gt;';
    for (var Q=0; Q&lt;maxQues; Q++) {
    str += 'Question #'+(Q+1)+'&lt;br&gt;';
    str += QuesResp[QRpointers[Q]][0];
    // str += ' &lt;input type="text" id="R'+Q+'" value="' +QuesResp[QRpointers[Q]][1]+ '"&gt;&lt;p&gt;';
    str += ' &lt;input type="text" id="R'+Q+'"&gt;&lt;p&gt;';
    }
    str += '&lt;INPUT value="CHECK ALL" type="button" onclick="scoreme()"&gt;';
    str += '&lt;INPUT id="score" type="text" size="8"&gt;';
    document.getElementById('QuestionsResponses').innerHTML = str;
    }
    function scoreme() {
    var sum = 0; var total=maxQues;
    var corr, resp;
    var sel = document.getElementById('QuestionsResponses').getElementsByTagName('input'); <br/>
    for (var i=0; i&lt;sel.length-1; i++) {
    corr = QuesResp[QRpointers[i]][1];
    resp = sel[i].value;
    if (resp != '') {
    if ( (corr.toLowerCase().indexOf(resp.toLowerCase()) ) != -1) { sum++; } // for part match
    // if (corr.toLowerCase() == resp.toLowerCase()) { sum++; } // for EXACT match
    // if (corr == resp) { sum++; } // for EXACT CASE match
    }
    }
    document.getElementById('score').value = ((sum/maxQues)*100).toFixed(0)+'%';
    }
    &lt;/script&gt;

    &lt;/body&gt;
    &lt;/html&gt;


    Note 1: There are better ways to randomize. This one is for example only.


    Note 2: You will need to add your own logic to display the correct answer if user enters incorrectly.

    This version just gives the percentage of correct responses.

    Note 3: Kind of matches for correct response can be altered. (see comments in code)

    Note 4: I see this as only a form of "flash-card" quiz presentation. Would not use for a real grade.
    Copy linkTweet thisAlerts:
    @alex05okauthorNov 15.2013 — I have this code, but i have some questions who need math formula (fractions) and i cant add them.

    [CODE]<html>
    <head>
    <style>
    .corect {color:green;}
    .incorect {color:red;}
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript"></script>
    <script>
    function shuffle(array) {
    var currentIndex = array.length, temporaryValue, randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {
    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
    }

    return array;
    }

    var array_intrebari = new Array();
    array_intrebari [0] = {question : "Number 1" , answer: "1"};
    array_intrebari [1] = {question : "Number 2" , answer: "2"};
    array_intrebari [2] = {question : "Number 3" , answer: "3"};
    array_intrebari [3] = {question : "Number 4" , answer: "4"};
    array_intrebari [4] = {question : "Number 5" , answer: "5"};
    array_intrebari [5] = {question : "Number 6" , answer: "6"};
    array_intrebari [6] = {question : "Number 7" , answer: "7"};
    array_intrebari [7] = {question : "Number 8" , answer: "8"};
    array_intrebari [8] = {question : "Number 9" , answer: "9"};
    array_intrebari [9] = {question : "Number 10" , answer: "10"};
    array_intrebari [10] = {question : "Number 11" , answer: "11"};
    array_intrebari [11] = {question : "Number 12" , answer: "12"};
    array_intrebari [12] = {question : "Number 13" , answer: "13"};
    array_intrebari [13] = {question : "Number 14" , answer: "14"};
    array_intrebari [14] = {question : "Number 15" , answer: "15"};


    //console.log(array_intrebari);
    array_intrebari = shuffle(array_intrebari);
    $(document).ready(function(){
    for (var i = 0 ; i <=10; i++)
    $("#quiztable").append("<tr><td>"+array_intrebari[i]['question']+"</td><td><input type='text' class='answer' /><span class='label'></span></td></tr>");

    $("#quiztable").append("<tr><td></td><td><input type='button' id='checkAnswers' value='Verifica!' /></td></tr>");

    $("#checkAnswers").click(function(){
    i = 0;
    $(".answer").each(function(){
    if ($(this).val() == array_intrebari[i]['answer'])
    $(this).closest("tr").find("span").removeClass("incorect").addClass("corect").html("Corect!");
    else
    $(this).closest("tr").find("span").removeClass("corect").addClass("incorect").html("Incorect!");
    i++;
    });
    });

    });



    </script>
    </head>
    <body>
    <div id="quiz">
    <table id="quiztable">
    </table>
    </div>
    </body>
    </html>[/CODE]
    Copy linkTweet thisAlerts:
    @tech_soul8Nov 15.2013 — This is another randomizer if you find it useful... Store questions in an array and use randomizer to pick up (n) number of random questions from array.

    <i>
    </i>function getNumbers(n,range) { // n = number of unique numbers from specified range
    var nums = [], tmpNum;

    <i> </i> tmpNum = Math.floor((Math.random() * range) +1);

    <i> </i> for (var i = 0; i &lt; n; i++) {
    <i> </i> if (i &gt; 0) {
    <i> </i> if (nums.indexOf(tmpNum) &gt; -1) {
    <i> </i> while (nums.indexOf(tmpNum) &gt; -1) {
    <i> </i> tmpNum = Math.floor((Math.random() * range) +1);
    <i> </i> }
    <i> </i> }
    <i> </i> }
    <i> </i> nums[i] = tmpNum;
    <i> </i> }
    <i> </i> return nums;
    }
    Copy linkTweet thisAlerts:
    @alex05okauthorNov 15.2013 — I think i should put images of questions instead of text.
    Copy linkTweet thisAlerts:
    @PadonakNov 15.2013 — i always wonder who takes all these quizes?!
    Copy linkTweet thisAlerts:
    @JMRKERNov 15.2013 — I think i should put images of questions instead of text.[/QUOTE]

    This and post #7 are the reasons I asked all those questions in post #3!

    You should think about and design for the requirements before you start any coding.
    Copy linkTweet thisAlerts:
    @zekepotsMar 17.2017 — This is only a template of what kind of questions/responses you can create.

    Add more as needed. It currently is 25 questions with 5 randomly displayed at a time.

    It is my best guess as to your needs as you seem to not want to provide any examples.

    It can be contracted or expanded to pairs above and below 100.

    <i>
    </i>&lt;!DOCTYPE html&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;

    &lt;title&gt; Untitled &lt;/title&gt;
    &lt;script type="text/javascript"&gt;
    // For:
    // http://www.webdeveloper.com/forum/showthread.php?286477
    // -How-to-make-a-javascript-quiz-to-choose-10-random-questions-from-100-questions&amp;p=1296827#post1296827

    var QuesResp = [
    ['Dog','Cat'], ['King','Queen'], ['TV','Radio'], ['Flashlight','Candle'], ['Book','Tablet'],
    ['Desk','Chair'], ['Guitar','Banjo'],['Jester','Clown'], ['Coffee','Tea'], ['Coat','Pants'],
    ['Clock','Watch'], ['Rain','Snow'], ['Rats','Mice'], ['Tie','Scarf'], ['Hat','Cap'],
    ['Loafers','Wingtips'], ['Phamphlet','Magazine'], ['Cup','Pint'], ['Gallon','Liter'], ['Keyboard','Stylus'],
    ['Chair','Table'], ['Pen','Pencil'], ['Box','Circle'], ['Triangle','Rectangle'],['Gun','Knife'] // no comma after last entry
    ];
    &lt;/script&gt;

    &lt;/head&gt;
    &lt;body&gt;
    &lt;div id="QuestionsResponses"&gt;&lt;/div&gt;

    &lt;script type="text/javascript"&gt;
    var maxQues = 5;
    var QRpointers = [];

    function randOrd() { return (Math.round(Math.random())-0.5); } // quick and dirty randomizer (not the best)

    window.onload = function() {
    for (var i=0; i&lt;QuesResp.length; i++) { QRpointers.push(i); }
    QRpointers.sort(randOrd); // better randomizers are available

    var str = '&lt;h1&gt;Enter common associations&lt;/h1&gt;';
    for (var Q=0; Q&lt;maxQues; Q++) {
    str += 'Question #'+(Q+1)+'&lt;br&gt;';
    str += QuesResp[QRpointers[Q]][0];
    // str += ' &lt;input type="text" id="R'+Q+'" value="' +QuesResp[QRpointers[Q]][1]+ '"&gt;&lt;p&gt;';
    str += ' &lt;input type="text" id="R'+Q+'"&gt;&lt;p&gt;';
    }
    str += '&lt;INPUT value="CHECK ALL" type="button" onclick="scoreme()"&gt;';
    str += '&lt;INPUT id="score" type="text" size="8"&gt;';
    document.getElementById('QuestionsResponses').innerHTML = str;
    }
    function scoreme() {
    var sum = 0; var total=maxQues;
    var corr, resp;
    var sel = document.getElementById('QuestionsResponses').getElementsByTagName('input'); <br/>
    for (var i=0; i&lt;sel.length-1; i++) {
    corr = QuesResp[QRpointers[i]][1];
    resp = sel[i].value;
    if (resp != '') {
    if ( (corr.toLowerCase().indexOf(resp.toLowerCase()) ) != -1) { sum++; } // for part match
    // if (corr.toLowerCase() == resp.toLowerCase()) { sum++; } // for EXACT match
    // if (corr == resp) { sum++; } // for EXACT CASE match
    }
    }
    document.getElementById('score').value = ((sum/maxQues)*100).toFixed(0)+'%';
    }
    &lt;/script&gt;

    &lt;/body&gt;
    &lt;/html&gt;


    Note 1: There are better ways to randomize. This one is for example only.


    Note 2: You will need to add your own logic to display the correct answer if user enters incorrectly.

    This version just gives the percentage of correct responses.

    Note 3: Kind of matches for correct response can be altered. (see comments in code)

    Note 4: I see this as only a form of "flash-card" quiz presentation. Would not use for a real grade.[/QUOTE]



    Hi JMRKR,

    I am new to this forum and also just starting with javascript. your code is very much helpful for beginners like me.

    I would like to ask from help regarding your template above. i would like to know what command to be use if I want to show the INCORRECT answers by changing the font color to RED after clicking CHECK ALL.

    Thanks in advance.
    Copy linkTweet thisAlerts:
    @JMRKERMar 17.2017 — The following changes the background color after the 1st submit.

    I thought it made it a bit more distinctive than just the word color alone.

    Compare the following with the previous post to see where the changes were made.

    <i>
    </i>&lt;!DOCTYPE html&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;

    &lt;title&gt; Untitled &lt;/title&gt;
    &lt;style type="text/css"&gt;
    .qno { display: inline-block; width: 100px; }
    .resp { display: inline-block; width: 150px; }
    &lt;/style&gt;

    &lt;script type="text/javascript"&gt;
    // For:
    // http://www.webdeveloper.com/forum/showthread.php?286477
    // -How-to-make-a-javascript-quiz-to-choose-10-random-questions-from-100-questions&amp;p=1296827#post1296827

    var QuesResp = [
    ['Dog','Cat'], ['King','Queen'], ['TV','Radio'], ['Flashlight','Candle'], ['Book','Tablet'],
    ['Desk','Chair'], ['Guitar','Banjo'],['Jester','Clown'], ['Coffee','Tea'], ['Coat','Pants'],
    ['Clock','Watch'], ['Rain','Snow'], ['Rats','Mice'], ['Tie','Scarf'], ['Hat','Cap'],
    ['Loafers','Wingtips'], ['Phamphlet','Magazine'], ['Cup','Pint'], ['Gallon','Liter'], ['Keyboard','Stylus'],
    ['Chair','Table'], ['Pen','Pencil'], ['Box','Circle'], ['Triangle','Rectangle'],['Gun','Knife'] // no comma after last entry
    ];
    &lt;/script&gt;

    &lt;/head&gt;
    &lt;body&gt;
    &lt;div id="QuestionsResponses"&gt;&lt;/div&gt;

    &lt;script type="text/javascript"&gt;
    var maxQues = 5;
    var QRpointers = [];

    function randOrd() { return (Math.round(Math.random())-0.5); } // quick and dirty randomizer (not the best)

    window.onload = function() {
    for (var i=0; i&lt;QuesResp.length; i++) { QRpointers.push(i); }
    QRpointers.sort(randOrd); // better randomizers are available

    var str = '&lt;h1&gt;Enter common associations&lt;/h1&gt;';
    for (var Q=0; Q&lt;maxQues; Q++) {
    str += '&lt;div class="qno"&gt;Question #'+(Q+1)+'&lt;/div&gt; ';
    str += QuesResp[QRpointers[Q]][0];
    // str += ' &lt;input type="text" id="R'+Q+'" value="' +QuesResp[QRpointers[Q]][1]+ '"&gt;';
    str += ' &lt;div class="resp"&gt;&lt;input type="text" id="R'+Q+'"&gt;&lt;/div&gt;&lt;p&gt;';
    }
    str += '&lt;INPUT value="CHECK ALL" type="button" onclick="scoreme()"&gt;';
    str += '&lt;INPUT id="score" type="text" size="8"&gt;';
    document.getElementById('QuestionsResponses').innerHTML = str;
    }
    function scoreme() {
    var sum = 0; var total=maxQues;
    var corr, resp;
    var sel = document.getElementById('QuestionsResponses').getElementsByTagName('input'); <br/>
    for (var i=0; i&lt;sel.length-1; i++) {
    corr = QuesResp[QRpointers[i]][1];
    resp = sel[i].value;
    if (resp != '') {
    if ( (corr.toLowerCase().indexOf(resp.toLowerCase()) ) != -1) { sum++; // for part match
    sel[i].style.backgroundColor = 'lime'; // set background color (green ???) for correct
    } else {
    sel[i].style.backgroundColor = 'pink'; // highlight incorrect answer in red
    }
    // if (corr.toLowerCase() == resp.toLowerCase()) { sum++; } // for EXACT match
    // if (corr == resp) { sum++; } // for EXACT CASE match
    }
    }
    document.getElementById('score').value = ((sum/maxQues)*100).toFixed(0)+'%';
    }
    &lt;/script&gt;

    &lt;/body&gt;
    &lt;/html&gt;
    Copy linkTweet thisAlerts:
    @zekepotsMar 18.2017 — The following changes the background color after the 1st submit.

    I thought it made it a bit more distinctive than just the word color alone.

    Compare the following with the previous post to see where the changes were made.

    <i>
    </i>&lt;!DOCTYPE html&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;

    &lt;title&gt; Untitled &lt;/title&gt;
    &lt;style type="text/css"&gt;
    .qno { display: inline-block; width: 100px; }
    .resp { display: inline-block; width: 150px; }
    &lt;/style&gt;

    &lt;script type="text/javascript"&gt;
    // For:
    // http://www.webdeveloper.com/forum/showthread.php?286477
    // -How-to-make-a-javascript-quiz-to-choose-10-random-questions-from-100-questions&amp;p=1296827#post1296827

    var QuesResp = [
    ['Dog','Cat'], ['King','Queen'], ['TV','Radio'], ['Flashlight','Candle'], ['Book','Tablet'],
    ['Desk','Chair'], ['Guitar','Banjo'],['Jester','Clown'], ['Coffee','Tea'], ['Coat','Pants'],
    ['Clock','Watch'], ['Rain','Snow'], ['Rats','Mice'], ['Tie','Scarf'], ['Hat','Cap'],
    ['Loafers','Wingtips'], ['Phamphlet','Magazine'], ['Cup','Pint'], ['Gallon','Liter'], ['Keyboard','Stylus'],
    ['Chair','Table'], ['Pen','Pencil'], ['Box','Circle'], ['Triangle','Rectangle'],['Gun','Knife'] // no comma after last entry
    ];
    &lt;/script&gt;

    &lt;/head&gt;
    &lt;body&gt;
    &lt;div id="QuestionsResponses"&gt;&lt;/div&gt;

    &lt;script type="text/javascript"&gt;
    var maxQues = 5;
    var QRpointers = [];

    function randOrd() { return (Math.round(Math.random())-0.5); } // quick and dirty randomizer (not the best)

    window.onload = function() {
    for (var i=0; i&lt;QuesResp.length; i++) { QRpointers.push(i); }
    QRpointers.sort(randOrd); // better randomizers are available

    var str = '&lt;h1&gt;Enter common associations&lt;/h1&gt;';
    for (var Q=0; Q&lt;maxQues; Q++) {
    str += '&lt;div class="qno"&gt;Question #'+(Q+1)+'&lt;/div&gt; ';
    str += QuesResp[QRpointers[Q]][0];
    // str += ' &lt;input type="text" id="R'+Q+'" value="' +QuesResp[QRpointers[Q]][1]+ '"&gt;';
    str += ' &lt;div class="resp"&gt;&lt;input type="text" id="R'+Q+'"&gt;&lt;/div&gt;&lt;p&gt;';
    }
    str += '&lt;INPUT value="CHECK ALL" type="button" onclick="scoreme()"&gt;';
    str += '&lt;INPUT id="score" type="text" size="8"&gt;';
    document.getElementById('QuestionsResponses').innerHTML = str;
    }
    function scoreme() {
    var sum = 0; var total=maxQues;
    var corr, resp;
    var sel = document.getElementById('QuestionsResponses').getElementsByTagName('input'); <br/>
    for (var i=0; i&lt;sel.length-1; i++) {
    corr = QuesResp[QRpointers[i]][1];
    resp = sel[i].value;
    if (resp != '') {
    if ( (corr.toLowerCase().indexOf(resp.toLowerCase()) ) != -1) { sum++; // for part match
    sel[i].style.backgroundColor = 'lime'; // set background color (green ???) for correct
    } else {
    sel[i].style.backgroundColor = 'pink'; // highlight incorrect answer in red
    }
    // if (corr.toLowerCase() == resp.toLowerCase()) { sum++; } // for EXACT match
    // if (corr == resp) { sum++; } // for EXACT CASE match
    }
    }
    document.getElementById('score').value = ((sum/maxQues)*100).toFixed(0)+'%';
    }
    &lt;/script&gt;

    &lt;/body&gt;
    &lt;/html&gt;
    [/QUOTE]


    wow. works perfectly!

    One last thing, is there a way to show the correct answer beside every wrong answer after clicking "CHECK ALL"?

    thanks in advance! i'm loving this thing! :-D
    Copy linkTweet thisAlerts:
    @JMRKERMar 18.2017 — I'll post my solution after you read the following:

    There is a way to do that with just a small change to the existing code.

    BUT, before I show you my solution, I think you should make an attempt.

    Let's see the code change you would do to accomplish the request.

    It is the best way to learn and show that you understand the existing script

    and it will help you improved your own scripting logic. ?
    Copy linkTweet thisAlerts:
    @rootMar 18.2017 — a randomiser routine goes something like this rnd = 10;
    choices = []; // where to store the chosen questions ref.
    questions = ["","",""]; // the questions
    while( rnd-- &gt; 0 ){
    do{
    rand = ~~(Math.random() * questions.length) | 0;
    }while( choices.indexOf( rand )&gt;-1 ); // have we already chosen this
    choices.push( rand );
    }

    one way of storing the questions could be :
    <i>
    </i>questions = {
    0:{question:1, text:"What is this about?", answers:["Eating cheese","Picking your nose"], score:[0,1]},
    1:{question:2, text:"When is this?", answers:["Last week","Next year","Friday Week"], score:[0,1,2]},
    ...
    }
     so the question is questions[ n ].text, what the score is for the correct answer is in questions[ n ].score which is an array and I think you can guess the rest.
    Copy linkTweet thisAlerts:
    @caiyingApr 26.2018 — @zekepots#1500111 when we click check all, even the score is 100%, the box of CHECK ALL also will turn red,how to solve it?
    Copy linkTweet thisAlerts:
    @JMRKERApr 27.2018 — What code are you using? The last version of the suggestions works fine.

    It is difficult to guess at what problems you are having without seeing what you are using.

    Also, you should not hijack a thread. This post is over a year old.

    It is OK to reference the original post, but you should really start your own thread to get a faster response. Looking through long, older threads, where the original poster has not responded in awhile, makes most viewers think the OP got a satisfactory answer. If you want a more personalized response to your questions you should really start your own thread and provide the code you are using that is giving you problems.
    Copy linkTweet thisAlerts:
    @HUNKERPDec 26.2018 — hey how to make it radio button choices
    Copy linkTweet thisAlerts:
    @rootDec 26.2018 — {"locked":true}
    ×

    Success!

    Help @alex05ok spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 4.25,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...