www.webdeveloper.com
Results 1 to 4 of 4

Thread: Randomize this quiz

  1. #1
    Join Date
    May 2014
    Posts
    1

    Randomize this quiz

    Here is a quiz with 5 questions, i want to make it in such a way that when you load the page, only 3 questions appears and when you refresh it, the questions are randomly displayed. and the score is calculated for the displayed quiz.
    Here is my code


    <HEAD>

    <style type="text/css">
    <!--
    .bgclr {background-color: white; color: black; font-weight: bold;}
    -->
    </style>

    <script language="JavaScript">

    <!-- Begin
    // Insert number of questions
    var numQues = 5;

    // Insert number of choices in each question
    var numChoi = 3;

    // Insert number of questions displayed in answer area
    var answers = new Array(4);

    // Insert answers to questions
    answers[0] = "Cascading Style Sheets";
    answers[1] = "Dynamic HTML";
    answers[2] = "Netscape";
    answers[3] = "Common Gateway Interface";
    answers[4] = "Database Management System";

    // Do not change anything below here ...
    function getScore(form) {
    var score = 0;
    var currElt;
    var currSelection;
    for (i=0; i<numQues; i++) {
    currElt = i*numChoi;
    for (j=0; j<numChoi; j++) {
    currSelection = form.elements[currElt + j];
    if (currSelection.checked) {
    if (currSelection.value == answers[i]) {
    score++;
    break;
    }
    }
    }
    }
    score = Math.round(score/numQues*100);
    form.percentage.value = score + "%";
    var correctAnswers = "";
    for (i=1; i<=numQues; i++) {
    correctAnswers += i + ". " + answers[i-1] + "\r\n";
    }
    form.solutions.value = correctAnswers;
    }
    // End -->
    </script>

    </HEAD>

    <!-- STEP TWO: Copy this code into the BODY of your HTML document -->

    <BODY>

    <h3>Web Design Quiz</h3>

    <form name="quiz">
    1. What does CSS stand for?
    <ul style="margin-top: 1pt">
    <li><input type="radio" name="q1" value="Colorful Style Symbols">Colorful Style Symbols</li>
    <li><input type="radio" name="q1" value="Cascading Style Sheets">Cascading Style Sheets</li>
    <li><input type="radio" name="q1" value="Computer Style Symbols">Computer Style Symbols</li>
    </ul>

    2. What does DHTML stand for?
    <ul style="margin-top: 1pt">
    <li><input type="radio" name="q2" value="Dramatic HTML">Dramatic HTML</li>
    <li><input type="radio" name="q2" value="Design HTML">Design HTML</li>
    <li><input type="radio" name="q2" value="Dynamic HTML">Dynamic HTML</li>
    </ul>
    3. Who created Javascript?
    <ul style="margin-top: 1pt">
    <li><input type="radio" name="q3" value="Microsoft">Microsoft</li>
    <li><input type="radio" name="q3" value="Netscape">Netscape</li>
    <li><input type="radio" name="q3" value="Sun Micro Systems">Sun Micro Systems</li>
    </ul>
    4. What does CGI stand for?
    <ul style="margin-top: 1pt">
    <li><input type="radio" name="q4" value="Cascading Gate Interaction">Cascading Gate Interaction</li>
    <li><input type="radio" name="q4" value="Common GIF Interface">Common GIF Interface</li>
    <li><input type="radio" name="q4" value="Common Gateway Interface">Common Gateway Interface</li>
    </ul>
    5. What does DBMS stand for?
    <ul style="margin-top: 1pt">
    <li><input type="radio" name="q5" value="Cascading Gate Interaction">Database Management System</li>
    <li><input type="radio" name="q5" value="Common GIF Interface">Common GIF Interface</li>
    <li><input type="radio" name="q5" value="Common Gateway Interface">Common Gateway Interface</li>
    </ul>
    <input type="button" value="Get score" onClick="getScore(this.form)">
    <input type="reset" value="Clear answers">
    <p> Score = <strong><input class="bgclr" type="text" size="5" name="percentage" disabled></strong><br><br>
    Correct answers:<br>
    <textarea class="bgclr" name="solutions" wrap="virtual" rows="5" cols="30" disabled>
    </textarea>
    </form>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377
    Have you searched this forum for other solutions to this same problem?

    Hint, you will not be able to "hard-code" the questions inside the <body> tags.
    Consider using an array to hold the questions/response items/answers and an <div> element
    with the .innerHTML assignment.

  3. #3
    Join Date
    May 2014
    Posts
    893
    JMRKER is right in that you'd either have to generate them with innerHTML, or I'd probably use the DOM for that -- BUT, really this isn't something I'd randomize client-side in the first place. I'd be doing that on the SERVER so that scripting off the page still works.

    ... again, the unwritten rule of JavaScript -- if you can't make the page work without scripting FIRST, you likely have no business adding scripting to it.

    Also, what makes inputs and their labels LISTS when they already have a semantic relationship? Since they're radio sets why don't they have their own FIELDSET and why aren't you making the questions be headings or LEGEND? Much less, where even ARE your LABEL? Of course, unless your scripting is accessing the form in the old nyetscape 4 style manner, why do you have NAME on FORM? the waste of code using the STYLE attribute isn't helping either... or the H3 without a H2 or H1 preceding it, though I'm hoping that's just from gutting it down to a snippet

    Pretty much you've got gibberish abuse of the wrong tags there.
    Java is to JavaScript as Ham is to Hamburger.

  4. #4
    Join Date
    Mar 2009
    Posts
    490
    1. Enclose every separate question and options in a DIV tag, and give them
    all the same class name, such as "question", as in "<div class="question">

    2. put the following function in your script. Given an array (or nodelist) as an argument, it returns an array containing all the values of the argument but with them being in randomized order:

    Code:
    function scramble(arr){ //returns array or nl in scrambled order
        var i, len, obj, sorter, rnd, res;
        obj = {};
        sorter = [];
        res = [];
        len = arr.length;
        i = 0;
        while(i < len){
    	rnd = Math.random() + "";
    	if(obj[rnd]){
    	    continue;
    	}
    	obj[rnd] = arr[i];
    	i++;
    	sorter.push(rnd);
        }
        sorter = sorter.sort();
        
        for(i = 0; i < len; i++){
    	res.push(obj[sorter[i]]);
        }
    
        return res;
    }
    3. Now for window onload. I haven't tested it, but I think it will work.

    Code:
    window.onload = function(){
        var i, len, list, arr, rnd;
        list = document.getElementsByClassName('question');
        //turn it into an array--we don't want it 'live'
        arr = [];
        len = list.length;
        for(i = 0; i < len; i++){
    	arr.push(list[i]);
        }
        rnd = scramble(arr);
        for( i = 0; i < len; i++){
    	arr[i].parentNode.replaceChild(rnd[i],arr[i]);
    	//as per request, make the last two invisible
    	if(i > 2){
    	    rnd[i].style.display = "none";
    	}
        }
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles