dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Trying to create a simple Multiple Choice game

  1. #1
    Join Date
    Jan 2013
    Posts
    1

    Trying to create a simple Multiple Choice game

    My function that lists the question and choices won't work. I keep getting the error code 'document.getElementById(...)' is null or not an object. The syntax appears to be correct.

    I want the questions and choices to appear in the same divs. I do not want to list all my questions at once. When the user completes a question, they then move on to the next question which will appear in exactly the same divs as the first question until all the questions have been seen.

    HTML Code:
    <script>
    
    var questions = new Array();
    questions[0] = 'Is there a difference between a jungle and a rain forest?'
    questions[1] = 'What is the world\'s most common religion?',
    questions[2] = 'What is the second largest country (in size) in the world?';
    
    var choices = new Array();
    choices[0] = ['No difference', 'Some difference', 'Completely different'],
    choices[1] = ['Christianity', 'Buddhism', 'Hinduism', 'Islam'],
    choices[2] = ['USA', 'China', 'Canada', 'Russia'];
    
    var answers = new Array();
    answers[0] = ['Some difference'],
    answers[1] = ['Christianity'],
    answers[2] = ['Canada'];
    
    var score = 0;
    i= 0;
    
    var listQuestion = function(){  
    if(i<questions.length){
    document.getElementById("myDiv1").innerHTML = '<p>'+questions[i]+'</p>';
    for (k=0; k<choices[i].length; k++){
    document.getElementById("myDiv2").innerHTML ='<p><input type = "radio" name = "questionchoice">'+choices[i][k]+'</p>';
    }
    document.getElementById("myDiv3").innerHTML = '<p><button onClick = "getRadioValue()">Check</button></p> <br>';
    };
    };
    
    
    
    var getRadioValue = function()
    {
        for (var h = 0; h < document.getElementsByName('questionchoice').length; h++)
        {
            var value = '';
    
            if (document.getElementsByName('questionchoice')[h].checked==true)
            {
                value = document.getElementsByName('questionchoice')[h].value;
    
    
        score+=1        
    
    }
        }
    if (value== answers[i]){
        document.getElementById("myDiv4").innerHTML ="That is correct. </br><button input type = 'submit' onClick = 'loadContent()'> Next Question</button>";   
    }
    
    else {
    
    document.getElementById("myDiv4").innerHTML ="That is incorrect. </br><button input type = 'submit' onClick = 'loadContent()'> Next Question</button>"; 
    
        }
    i++;
    };
    
    
    var whatIsScore = function(){
    
    return score; 
    
    }
    window.onload = listQuestion();
    
    </script>
    
    </head>
    
    <body>
    <div id="myDiv1"></div> 
    <div id="myDiv2"></div>
    <div id="myDiv3"></div>
    <div id="myDiv4"></div>
    
    
    </body>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

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