Help needed with quiz

JavaScript
1

Hello, I am working on a quiz and I am stuck. Could anyone help me please? I am supposed to create an online quiz by using javascript, one question per site, submit and get score. I am not sure what I am doing wrong, because I can see all of my 3 questions on one site…and I cant get score…Please help:confused:

My html:

<!DOCTYPE html>
<html>
<head>
    <title>quiz</title>

</head>
<body>
<form name="quiz" onsubmit="return getScore(this)">
    <script src="/js/quizconfig.js"></script>

   <p>Welcome</p>

    <div id ="q1" class = questions>

        1. Who has won the World Cup the Most?  <br>

        <label>
            <input type="radio" name="q1" value="Brazil">
        </label>Brazil  <br>
        <label>
            <input type="radio" name="q1" value="Argentina">
        </label>Argentina  <br>
        <label>
            <input type="radio" name="q1" value="Italy">
        </label>Italy   <br>

        </div>
    <div id ="q2" class = questions>

        2. Who has won the World Cup the Most?   <br>

        <label>
            <input type="radio" name="q2" value="Brazil">
        </label>Brazil  <br>
        <label>
            <input type="radio" name="q2" value="Argentina">
        </label>Argentina  <br>
        <label>
            <input type="radio" name="q2" value="Italy">
        </label>Italy   <br>

    </div>
    <div id ="q3" class = questions>

       3. Who has won the World Cup the Most? <br>

        <label>
            <input type="radio" name="q3" value="Brazil">
        </label>Brazil  <br>
        <label>
            <input type="radio" name="q3" value="Argentina">
        </label>Argentina  <br>
        <label>
            <input type="radio" name="q3" value="Italy">
        </label>Italy   <br>

    </div>

    <div id="q4" class="questions">
        <input type="submit" value="Submit">

    </div>

    <button onclick="nextQuestion()">Next</button>

    </form>
</body>
</html>

My javascript file:

var answers = new Array(3);        // Number of questions displayed in the answer area
answers[0] = "Brazil"; //Answers to Questions
answers[1] = "Uruguay";
answers[2] = "Jules Rimet Trophy";


var currentQues = 0;			//Current question to display
var numQues = answers.length;	//Number of Questions
var numChoi = 3;	        	//How many possible answers

function getScore(form) {
    var score = 0;													// initialize score
    var currElt;													// initialize variables
    var currSelection;
    for (i=0; i<numQues; i++) {									// check all questions
        currElt = i*numChoi;											// form element to check
        for (j=0; j<numChoi; j++) {									// check each choice of question
            currSelection = form.elements[currElt + j];					// form element to test if checked
            if (currSelection.checked) {									// true if checked
                if (currSelection.value == answers[i]) { 					// then compare checked value to answer
                    score++;													// if match, then increment score value
                    break; }	  	      										// ttop check as match has been found
            }
        }
    }




}
function clearQuestions() {
    var sel = document.getElementById('questions').getElementsByTagName('div');
    for (var i=0; i<sel.length; i++) {
        document.getElementById(sel[i].id).style.display = 'none';
    }
}
function nextQuestion() {
    clearQuestions();
    document.getElementById('q'+(currentQues+1)).style.display = 'block';
    currentQues++;  if (currentQues > numQues) { currentQues--; }
}
2

Put quotes around the class names might help.
Although in the code you posted you don’t have a CSS file, and you don’t call the JS that hides them, so the three divs with the questions will be all visible when you first load the page?

3

Thanks alot:)