using textbox for a quiz

Solutions on MaxInterview for using textbox for a quiz by the best coders in the world

showing results for - "using textbox for a quiz"
25 Jan 2017
1
2<!DOCTYPE html>
3<html lang="en">
4<head>
5<meta charset="utf-8">
6  
7       
8 
9   <title>English</title>
10   
11    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
12  	<meta name="robots" content="index, follow"/>
13   <meta name="description" content=""/>
14<meta name="author" content="johnk" />
15
16<meta name="keywords" content=""/>
17
18
19    
20    
21    <style>
22      ol li {
23        background-image: none;
24        padding:10px;
25      }
26    </style>
27
28  </head>
29  <body>
30    <div id="pagewrap"> 
31      <div id="container">
32        <div id="content">
33           
34    
35       
36	  				
37
38          <h4>For, since or ago?</h4>
39          <div class="scroll">
40            <form method="post" id="myForm" name="f">
41              <ol>
42                <li>
43               It's been raining 
44                  <select name="question1">
45                    <option value="na"> </option>
46                    <option value="a"> for </option>   
47                    <option value="b"> since </option>
48                      <option value="c"> ago </option>  
49                  </select> 
50                 2 hours.
51                </li>
52                <li>
53                  They have lived here
54                  <select name="question2">
55                   <option value="na"> </option>
56                    <option value="a"> for </option>   
57                    <option value="b"> since </option>
58                      <option value="c"> ago </option>  
59                  </select>
60                 1990.
61                </li>
62                
63              </ol>
64            
65             <input type="submit" id="submit" value="Result" />
66              <input type="reset" class="reset" id="reset" name="reset" value="Start again" />
67            </form>
68             <div id="score"></div> 
69               <div class="address">
70           
71            </div>
72          </div> 
73        </div> 
74      </div> 
75    </div>
76    
77    <script>
78      Object.size = function(obj) {
79        var size = 0, key;
80        for (key in obj) {
81          if (obj.hasOwnProperty(key)) size++;
82        }
83        return size;
84      };
85      
86      (function(){
87        "use strict";
88        window.checkAnswers = function(opts){
89          
90          function validateInput(){
91            var question,
92                answer;
93                
94            for (question in opts) {
95              if(opts.hasOwnProperty(question)) {
96                answer = f.elements[question].options[f.elements[question].selectedIndex].value;
97                if(answer === "na"){
98                  opts[question].state = "not-filled-in";
99                } else if(answer === opts[question].answer){
100                  opts[question].state = "correct";
101                } else {
102                  opts[question].state = "error";
103                }
104              }
105            }
106          }
107          
108          function markCorrectOrIncorrect(){
109            var question, 
110                li;
111            
112            for (question in opts) {
113              if(opts.hasOwnProperty(question)) {
114                var img = new Image(),
115                li = f.elements[question].parentElement,
116                feedbackImg = li.getElementsByTagName('img')[0];
117
118                if (feedbackImg){
119                  li.removeChild(feedbackImg);
120                }
121                
122                if(opts[question].state === "correct"){
123                  img.src = "http://www.littletherese.com/tick.jpg";
124                  li.appendChild(img)
125                } else if(opts[question].state === "error"){
126                  img.src = "http://www.littletherese.com/x.jpg";
127                  li.appendChild(img)
128                }
129              }
130            }
131          }
132          
133          function displayScore(){
134            var correct = 0,
135                error = 0,
136                score = document.getElementById("score"),
137                totalQuestions = Object.size(opts),
138                question;
139
140            for (question in opts) {
141              if(opts.hasOwnProperty(question)) {
142                if(opts[question].state === "correct"){
143                  correct ++
144                } else if(opts[question].state === "error"){
145                  error ++
146                }
147              }
148            }
149            score.innerHTML = "You got " + correct + " out of " + totalQuestions;
150          }
151          
152          function init(){
153            validateInput();
154            markCorrectOrIncorrect();
155            displayScore();
156          }
157          
158          init();
159        }
160      }());
161
162      f.onsubmit = function(){
163        checkAnswers({
164          question1: {answer: "a"},
165          question2: {answer: "b"},
166       
167        })
168        return false;
169      }
170      
171    f.reset.onclick = function(){
172  var imgs = document.querySelectorAll('img');
173  for(var i=0; i<imgs.length; i++){
174    imgs[i].parentNode.removeChild(imgs[i]);
175  }
176
177  document.getElementById("score").innerHTML = "";
178}
179      
180    </script> 
181  </body>
182</html>
183
184
source