Answers for "using textbox for a quiz"

0

using textbox for a quiz

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
  
       
 
   <title>English</title>
   
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  	<meta name="robots" content="index, follow"/>
   <meta name="description" content=""/>
<meta name="author" content="johnk" />

<meta name="keywords" content=""/>


    
    
    <style>
      ol li {
        background-image: none;
        padding:10px;
      }
    </style>

  </head>
  <body>
    <div id="pagewrap"> 
      <div id="container">
        <div id="content">
           
    
       
	  				

          <h4>For, since or ago?</h4>
          <div class="scroll">
            <form method="post" id="myForm" name="f">
              <ol>
                <li>
               It's been raining 
                  <select name="question1">
                    <option value="na"> </option>
                    <option value="a"> for </option>   
                    <option value="b"> since </option>
                      <option value="c"> ago </option>  
                  </select> 
                 2 hours.
                </li>
                <li>
                  They have lived here
                  <select name="question2">
                   <option value="na"> </option>
                    <option value="a"> for </option>   
                    <option value="b"> since </option>
                      <option value="c"> ago </option>  
                  </select>
                 1990.
                </li>
                
              </ol>
            
             <input type="submit" id="submit" value="Result" />
              <input type="reset" class="reset" id="reset" name="reset" value="Start again" />
            </form>
             <div id="score"></div> 
               <div class="address">
           
            </div>
          </div> 
        </div> 
      </div> 
    </div>
    
    <script>
      Object.size = function(obj) {
        var size = 0, key;
        for (key in obj) {
          if (obj.hasOwnProperty(key)) size++;
        }
        return size;
      };
      
      (function(){
        "use strict";
        window.checkAnswers = function(opts){
          
          function validateInput(){
            var question,
                answer;
                
            for (question in opts) {
              if(opts.hasOwnProperty(question)) {
                answer = f.elements[question].options[f.elements[question].selectedIndex].value;
                if(answer === "na"){
                  opts[question].state = "not-filled-in";
                } else if(answer === opts[question].answer){
                  opts[question].state = "correct";
                } else {
                  opts[question].state = "error";
                }
              }
            }
          }
          
          function markCorrectOrIncorrect(){
            var question, 
                li;
            
            for (question in opts) {
              if(opts.hasOwnProperty(question)) {
                var img = new Image(),
                li = f.elements[question].parentElement,
                feedbackImg = li.getElementsByTagName('img')[0];

                if (feedbackImg){
                  li.removeChild(feedbackImg);
                }
                
                if(opts[question].state === "correct"){
                  img.src = "http://www.littletherese.com/tick.jpg";
                  li.appendChild(img)
                } else if(opts[question].state === "error"){
                  img.src = "http://www.littletherese.com/x.jpg";
                  li.appendChild(img)
                }
              }
            }
          }
          
          function displayScore(){
            var correct = 0,
                error = 0,
                score = document.getElementById("score"),
                totalQuestions = Object.size(opts),
                question;

            for (question in opts) {
              if(opts.hasOwnProperty(question)) {
                if(opts[question].state === "correct"){
                  correct ++
                } else if(opts[question].state === "error"){
                  error ++
                }
              }
            }
            score.innerHTML = "You got " + correct + " out of " + totalQuestions;
          }
          
          function init(){
            validateInput();
            markCorrectOrIncorrect();
            displayScore();
          }
          
          init();
        }
      }());

      f.onsubmit = function(){
        checkAnswers({
          question1: {answer: "a"},
          question2: {answer: "b"},
       
        })
        return false;
      }
      
    f.reset.onclick = function(){
  var imgs = document.querySelectorAll('img');
  for(var i=0; i<imgs.length; i++){
    imgs[i].parentNode.removeChild(imgs[i]);
  }

  document.getElementById("score").innerHTML = "";
}
      
    </script> 
  </body>
</html>
Posted by: Guest on October-03-2021

Browse Popular Code Answers by Language