/    Sign up×
Community /Pin to ProfileBookmark

Creating a quiz using arrays and radio buttons.

Hello, I am creating a quiz in javascript/html and need some assistance.
The quiz needs to have 3 random questions from an array containing 6 questions.
I’m trying to make the quiz answers selected using radio buttons.

I have created the arrays and code to generate the random numbers, but I am unsure of how to link the questions in the array to the questions asked in the form.

I am also unsure of how to create a verification process to verify the users answers.

Any help would be appreciated, I’m a novice at javascript.

Please could you keep it as simple as possible so it’s easier for me to understand.

Thanks in advance!

[CODE]<form name = “quiz”>
<h1> Quiz </h1>

Please make your choice:<br>

<input type=”radio” name=”question1″ value=”a1″>Q1<br>
<input type=”radio” name=”question1″ value=”a2″>Q2<br>
<input type=”radio” name=”question1″ value=”a3″>Q3<br>
<input type=”button” value=”Submit” onclick=”selectionOne()”><br><br>

<input type=”radio” name=”question2″ value=”a1″>Q1<br>
<input type=”radio” name=”question2″ value=”a2″>Q2<br>
<input type=”radio” name=”question2″ value=”a3″>Q3<br>
<input type=”button” value=”Submit” onclick=”selectionTwo()”><br><br>

<input type=”radio” name=”question3″ value=”a1″>Q1<br>
<input type=”radio” name=”question3″ value=”a2″>Q2<br>
<input type=”radio” name=”question3″ value=”a3″>Q3<br>
<input type=”button” value=”Submit” onclick=”selectionThree()”><br><br>

</form>
[/CODE]

[CODE]//Radio Button Selections
function selectionOne(){
var chosen = “”;
if (document.quiz.question1[0].checked){
chosen = document.quiz.question1[0].value;
}
else if (document.quiz.question1[1].checked){
chosen = document.quiz.question1[1].value;
}
else{
chosen = document.quiz.question1[2].value;
}
}

function selectionTwo(){
var chosen = “”;
if (document.quiz.question2[0].checked){
chosen = document.quiz.question2[0].value;
}
else if (document.quiz.question2[1].checked){
chosen = document.quiz.question2[1].value;
}
else{
chosen = document.quiz.question2[2].value;
}
}

function selectionThree(){
var chosen = “”;
if (document.quiz.question3[0].checked){
chosen = document.quiz.question3[0].value;
}
else if (document.quiz.question3[1].checked){
chosen = document.quiz.question3[1].value;
}
else{
chosen = document.quiz.question3[2].value;
}
}

//Create Objects with Questions and Answers In
var Q1={
question: “What is one of the keyboard shortcuts for copy?”,
a1: “Ctrl + C”,
a2: “Ctrl + V”,
a3: “Shift + C”,
answer: 1,
};

var Q2={
question: “What element of the browser enables you to get additional features?”,
a1: “Browser Addons”,
a2: “More Features”,
a3: “Browser Extensions”,
answer: 3,
};

var Q3={
question: “What is one of the keyboard shortcuts for paste?”,
a1: “Ctrl + P”,
a2: “Ctrl + V”,
a3: “Shift + V”,
answer: 2,
};

var Q4={
question: “What’s the quickest way to find specific text on this page?”,
a1: “Look for it”,
a2: “Ctrl + F”,
a3: “Ctrl + L”,
answer: 2,
};

var Q5={
question: “What computer component is featured on the front page?”,
a1: “Motherboard”,
a2: “Graphics Card”,
a3: “Hard Drive”,
answer: 1,
};

//Create array to store Objects (Questions and Answers)
var quiz = new Array(6);
quiz[0] = Q1;
quiz[1] = Q2;
quiz[2] = Q3;
quiz[3] = Q4;
quiz[4] = Q5;

//Generate Random question
var question1 = quiz[Math.floor(Math.random() * quiz.length)];
var question2 = quiz[Math.floor(Math.random() * quiz.length)];
var question3 = quiz[Math.floor(Math.random() * quiz.length)];
[/CODE]

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@JMRKERApr 06.2016 — Welcome to the forum.

Some observations you might consider...

  • 1. You have quite a bit of repeated code there. Can you imagine how difficult it might be to maintain if you have more than 6 questions? Consider using functions when ever you see repeated logic.


  • 2. You will have difficulty creating random displays when the coding (questions, responses and answers) are hard coded as you have done. Consider using an array that contains all 3 items together such that if the array is scrambled, the elements of the specific item combination will remain together. For example see the following INCOMPETE code.


  • [code=php]
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Quiz Template </title>
    </head>
    <body>

    <script type="text/javascript">
    //Create Objects with Questions and Answers In the QRA array (Question, Responses, Answer)
    var QRA = [
    ["What is one of the keyboard shortcuts for copy?",
    ["Ctrl + C",
    "Ctrl + V",
    "Shift + C"
    ],
    0,
    ],
    ["What element of the browser enables you to get additional features?",
    ["Browser Addons",
    "More Features",
    "Browser Extensions"
    ],
    2,
    ]
    // etc.
    ];

    // Access via functions
    function showItem(ques, item) {
    var str = 'Question #'+ques+'n', respChoice = ['a','b','c','d','e'];
    str += QRA[item][0]+'nn';
    for (var i=0; i<QRA[item][1].length; i++) {
    str += respChoice[i]+'. '+QRA[item][1][i]+'n';
    }
    alert(str);
    }

    showItem(1,1);
    showItem(2,0);

    </script>
    </body>
    </html>
    [/code]
    Copy linkTweet thisAlerts:
    @SempervivumApr 06.2016 — Some time ago I coded a similar quiz that uses a config structure to hold the questions in. This might be useful for you.

    http://jsfiddle.net/Sempervivum/t8fj9969/

    Be aware that cheating is easy when you do this by Javascript. The user can view the source code and read the correct answers.
    Copy linkTweet thisAlerts:
    @Ay__351_eApr 11.2016 — If I understand

    &lt;!DOCTYPE html&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;title&gt; Quiz Template &lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;form name = "quiz"&gt;
    &lt;h1&gt; Quiz &lt;/h1&gt;

    Please make your choice:&lt;br&gt;

    &lt;input type="radio" name="question1" value="0" onclick="sec(this)"&gt;Q1&lt;br&gt;
    &lt;input type="radio" name="question2" value="1" onclick="sec(this)"&gt;Q2&lt;br&gt;
    &lt;input type="radio" name="question3" value="2" onclick="sec(this)"&gt;Q3&lt;br&gt;
    &lt;input type="radio" name="question4" value="3" onclick="sec(this)"&gt;Q4&lt;br&gt;
    &lt;input type="radio" name="question5" value="4" onclick="sec(this)"&gt;Q5&lt;br&gt;

    &lt;input type="button" value="seçilenleri göster" onclick="sorular(v)"&gt;&lt;br&gt;&lt;br&gt;
    &lt;input type="button" value="rastgele soruver" onclick="sorular(rastgeleSec(5,3))"&gt;&lt;br&gt;&lt;br&gt;
    &lt;/form&gt;
    &lt;div id="sor"&gt;&lt;/div&gt;

    &lt;script type="text/javascript"&gt;

    var say = 0, v =[], n=[];
    function sec(bu){
    if(say == 3){ bu.checked = false; return; }

    v[say] = bu.value;
    n[say] = bu.name;
    say++;
    //alert(v+ " " + n);
    };

    function sorular(v) {

    var Q1={question: "What is one of the keyboard shortcuts for copy?", a1: "Ctrl + C", a2: "Ctrl + V", a3: "Shift + C", answer: 1 };

    var Q2={ question: "What element of the browser enables you to get additional features?",
    a1: "Browser Addons", a2: "More Features", a3: "Browser Extensions", answer: 3 };

    var Q3={ question: "What is one of the keyboard shortcuts for paste?", a1: "Ctrl + P", a2: "Ctrl + V", a3: "Shift + V", answer: 2 };

    var Q4={ question: "What's the quickest way to find specific text on this page?", a1: "Look for it", a2: "Ctrl + F", a3: "Ctrl + L", answer: 2 };

    var Q5={ question: "What computer component is featured on the front page?", a1: "Motherboard", a2: "Graphics Card", a3: "Hard Drive", answer: 1 };

    //Create array to store Objects (Questions and Answers)
    var quiz = [ Q1, Q2, Q3, Q4, Q5 ];


    // seçilen sorular&amp;#305; yazd&amp;#305;r
    var el= document.getElementById('sor');

    var metin = "", n, say, c1,c2,c3,cevap;
    for(i = 0; i&lt; v.length; i++) {
    n = quiz[v[i]];
    c1 = n.a1;
    c2 = n.a2;
    c3 = n.a3;
    cevap= n.answer;
    // alert("cevap= "+cevap);
    metin += "&lt;h2 style='color:blue'&gt;"+(n.question) + "&lt;/h2&gt;";
    metin += "&lt;p&gt;&lt;input type='radio' name='soru_"+i+"' value='1' onclick='degerlendir(this,"+cevap+")'&gt;"+ c1 +"&lt;/p&gt;";
    metin += "&lt;p&gt;&lt;input type='radio' name='soru_"+i+"' value='2' onclick='degerlendir(this,"+cevap+")'&gt;"+ c2 +"&lt;/p&gt;";
    metin += "&lt;p&gt;&lt;input type='radio' name='soru_"+i+"' value='3' onclick='degerlendir(this,"+cevap+")'&gt;"+ c3 +"&lt;/p&gt;";
    }
    el.innerHTML = metin;
    }

    function degerlendir(bu,c){ // alert(bu.value +" "+c);
    if(Number(bu.value) == c) {bu.parentNode.style.color="lime"; }
    if(Number(bu.value) != c) {bu.parentNode.style.color="red"; }
    }

    // seçimi yapan bir fonksiyon yaz
    function rastgeleSec(kacTaneden, kacTanesi){

    var dizi=[], secilen=[], r, i ;
    // elemanlar&amp;#305; farkl&amp;#305; olan bir diziye ihtiyaç var.
    for(i=0; i&lt;kacTaneden; i++) { dizi[dizi.length]=i;}
    //alert(dizi);
    //rastgele say&amp;#305;ya ihtiyaç var.
    for(i= 0; i&lt;kacTanesi; i++) {
    r = Math.floor(Math.random() * dizi.length);
    //alert("r= "+r);
    secilen[i]= dizi[r];
    // http://www.w3schools.com/jsref/jsref_splice.asp
    dizi.splice(r,1); // diziden r s&amp;#305;ras&amp;#305;ndaki eleman&amp;#305; att&amp;#305;k. Ayn&amp;#305; say&amp;#305; ikinci kez rastgele seçilse bile dizide ba&amp;#351;ka bir elemana denk gelecek.
    }
    //alert(secilen);
    return secilen;
    }

    &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    ×

    Success!

    Help @gssnoosm4 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 5.16,
    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: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

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