Hinzufügen einer Schaltfläche in HTML

Question

Ich möchte einen Fragebogen, der Fragen stellt, dann hat eine Schaltfläche am Ende der Seite namens "Antworten anzeigen", die dem Benutzer zeigt, welche Antworten sie richtig waren.

Wenn ich diese Frage zum Beispiel verwenden:

<p class="question">1. What is the answer to this question?</p>   

<ul class="answers">    
<input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Answer 1</label><br/>     
<input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Answer 2</label><br/>    
<input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Answer 3</label><br/>    
<input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Answer 4</label><br/>  
</ul> 

Wie würde ich einen Knopf für diesen Code gehen über das Erstellen, dass, wenn sie gedrückt, sagt, wenn die Antwort richtig ist oder nicht?

Answer 1

• Zwei .addEventListeners()

  • Einer auf dem Container, der alle Fragen enthält Anweisungen und Antworten (z.B. #QA1)
  • Die andere von der verwendeten Taste, wenn sie mit dem Quiz (z #btn1)
• beendet

  Wenn der Benutzer eine Antwort nimmt, #QA1 für alle Klicks auf jedem Radiobutton hören (z .answers). Die Verwendung eines einzelnen Ereignis-Listeners für mehrere event.targets (d. H. Das angeklickte Element) ist weitaus effizienter als das Hinzufügen eines einzelnen auf jedem Optionsfeld. Durch den Vergleich zwischen dem, was tatsächlich angeklickt wurde (Radio-Button) und dem, was das Element mit dem Hörer war, können wir die ID des Radioknopfes erhalten. Siehe hierzu article for details.

• Sobald die ID des angeklickten Optionsfelds festgelegt wurde (siehe vorherige Referenz), wird sie an ein Array gesendet (z. B. answers[]).

• Wenn der Benutzer fertig ist, klickt er/sie auf die Schaltfläche "FERTIG" und löst das Klickereignis #btn1 aus.

  • A for Schleife verwendet wird und über die answer[]key[] Arrays iterieren. Bei jeder Iteration (d. H. Schleife) werden die zwei für übereinstimmende Elemente verglichen.
  • Die Ergebnisse sind auf #out1 gedruckt, die ein <output> Element in einer geordneten Liste verschachtelt ist (<ol>).

Snippet

var qa = document.getElementById('QA1'); 
 
var btn1 = document.getElementById('btn1'); 
 
var answers = []; 
 
var key = ['q1c', 'q2a', 'q3d']; 
 

 
qa.addEventListener('click', function(event) { 
 
    if (event.target != event.currentTarget) { 
 
    var choice = event.target.id; 
 
    answers.push(choice); 
 
    } 
 
    event.stopPropagation(); 
 
}, false); 
 

 
btn1.addEventListener('click', function(event) { 
 
    event.preventDefault(); 
 
    var qList = document.getElementsByClassName('question'); 
 
    var out1 = document.getElementById('out1'); 
 

 
    for (var i = 0; i < qList.length; i++) { 
 
    if (answers[i] === key[i]) { 
 
     out1.innerHTML += '<li>' + answers[i] + ' is correct</li>'; 
 
    } else { 
 
     out1.innerHTML += '<li>' + answers[i] + ' is incorrect, the correct answer is ' + key[i] + '</li>'; 
 
    } 
 
    } 
 
}, false);

body { 
 
    font: 400 16px/1.45'Verdana'; 
 
} 
 
* { 
 
    font: inherit; 
 
} 
 
.question { 
 
    margin-bottom: 15px; 
 
} 
 
.answers { 
 
    list-style: none; 
 
} 
 
.answers li { 
 
    margin-left: -15px; 
 
} 
 
input[type="radio"] { 
 
    position: relative; 
 
    top: 2.25px; 
 
} 
 
#btn1 a { 
 
    text-decoration: none; 
 
} 
 
#out1 {

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script> 
 

 
<ol id="QA1" class="QA"> 
 
    <li id="q1" class="question">What is the answer to this question? 
 

 
    <ol class="answers"> 
 

 
     <li>a. 
 
     <input type="radio" name="q1" value="a" id="q1a" /> 
 
     <label for="q1a">Answer</label> 
 
     </li> 
 

 
     <li>b. 
 
     <input type="radio" name="q1" value="b" id="q1b" /> 
 
     <label for="q1b">Answer</label> 
 
     </li> 
 

 
     <li>c. 
 
     <input type="radio" name="q1" value="c" id="q1c" /> 
 
     <label for="q1c">Answer</label> 
 
     </li> 
 

 
     <li>d. 
 
     <input type="radio" name="q1" value="d" id="q1d" /> 
 
     <label for="q1d">Answer</label> 
 
     </li> 
 

 
    </ol> 
 
    <!--answers--> 
 

 
    </li> 
 
    <!--question--> 
 
    <li id="q2" class="question">What is the answer to this question? 
 

 
    <ol class="answers"> 
 

 
     <li>a. 
 
     <input type="radio" name="q2" value="a" id="q2a" /> 
 
     <label for="q2a">Answer</label> 
 
     </li> 
 

 
     <li>b. 
 
     <input type="radio" name="q2" value="b" id="q2b" /> 
 
     <label for="q2b">Answer</label> 
 
     </li> 
 

 
     <li>c. 
 
     <input type="radio" name="q2" value="c" id="q2c" /> 
 
     <label for="q2c">Answer</label> 
 
     </li> 
 

 
     <li>d. 
 
     <input type="radio" name="q2" value="d" id="q2d" /> 
 
     <label for="q2d">Answer</label> 
 
     </li> 
 

 
    </ol> 
 
    <!--answers--> 
 

 
    </li> 
 
    <!--question--> 
 
    <li id="q3" class="question">What is the answer to this question? 
 

 
    <ol class="answers"> 
 

 
     <li>a. 
 
     <input type="radio" name="q3" value="a" id="q3a" /> 
 
     <label for="q3a">Answer</label> 
 
     </li> 
 

 
     <li>b. 
 
     <input type="radio" name="q3" value="b" id="q3b" /> 
 
     <label for="q3b">Answer</label> 
 
     </li> 
 

 
     <li>c. 
 
     <input type="radio" name="q3" value="c" id="q3c" /> 
 
     <label for="q3c">Answer</label> 
 
     </li> 
 

 
     <li>d. 
 
     <input type="radio" name="q3" value="d" id="q3d" /> 
 
     <label for="q3d">Answer</label> 
 
     </li> 
 

 
    </ol> 
 
    <!--answers--> 
 

 
    </li> 
 
    <!--question--> 
 

 
</ol> 
 
<!--QA--> 
 
<button id="btn1"><a href="">DONE</a> 
 
</button> 
 
<ol> 
 
    <output id="out1"></output> 
 
</ol>

Answer 2

<p class="question">1. What is the answer to this question?</p>   

<ul id="answers" class="answers">    
<input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Answer 1</label><br/>     
<input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Answer 2</label><br/>    
<input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Answer 3</label><br/>    
<input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Answer 4</label><br/> 
<input type="button" value="submit" onClick="showAnswer()" />  
</ul> 

<span id="info"></span> 

Dann fügen Sie ein Skript über diesem Stück Code:

<script> 
    function showAnswer(){ 
     if(document.getElementById('q1a').checked){ 
      document.getElementById('info').innerHTML = "Correct!"; 
     }else{ 
      document.getElementById('info').innerHTML = "Incorrect!"; 
     } 
    } 
</script> 

Ich weiß nicht, die Antwort auf Ihre Quiz, so antworten 1 in diesem Fall korrekt ist.

Answer 3

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Questionare</title> 
 
    
 
</head> 
 
<body> 
 
<p>1. What is the answer to this question?</p>  
 
    
 
    <ul onclick="man()"> 
 
<input type="radio" name="q1" value="a">Answer 1<br/>    <input type="radio" name="q1" value="b">Answer 2<br/>    
 
<input type="radio" name="q1" value="c">Answer 3<br/>    
 
<input type="radio" name="q1" value="d">Answer 4<br/>  
 
    </ul> 
 
    <p id="m"></p> 
 
<script> 
 
    var man = function(){ 
 
    document.getElementById("m").innerHTML = 'The correct answer is: Answer 1'; 
 
    } 
 
    </script> 
 
</body> 
 
</html>

Hier ist, was u wollen, auf einfachste Art und Weise getan, CSS Document-Objektmodell verwendet, als Referenz gehen hier HTML CSS DOM