2016-08-03 20 views
1

Ich versuche, einen Online-Fragebogen zu erstellen, der nur die nächste Frage nach Beantwortung der aktuellen Frage anzeigen wird. Ich bin sehr neu darin und versuche zu lernen, wie ich gehe. Wie mache ich den zweiten Satz von Tasten nur erscheinen, wenn Sie Ja zu Frage 1 beantworten?Erstellen von Schaltflächen mit Schaltflächen

<html> 
 
Question 1 
 
<p> 
 

 
<button onclick="myFunction1()">Yes</button> 
 
<script> 
 
function myFunction1() { 
 
    document.getElementById("demo").innerHTML = "Yes on question 1, display question 2";document.getElementById("demo").style.color = "black";} 
 

 
</script> 
 

 
<button onclick="myFunction2()">No</button> 
 

 

 

 

 

 
<script> 
 
function myFunction2() { document.getElementById("demo").innerHTML ="No on question 1 negative answer to question 1 display negative response";document.getElementById("demo").style.color = "red";} 
 
</script> 
 
</html> 
 
<p id="demo"></p> 
 

 

 
</script> 
 

 
</p></p></p> 
 

 
</html> 
 

 
<head> 
 
    <script> 
 
     function showImg() { 
 
      document.getElementById("map_img").style.display = ""; 
 
     } 
 
    </script> 
 
</head> 
 
<body> 
 
    <button onclick="myFunction3()">Yes</button> 
 

 

 

 

 
<script> 
 
function myFunction3() { document.getElementById("demo2").innerHTML = "Yes to question 2";}</script> 
 
</html> 
 

 

 
<button onclick="myFunction4()">No</button> 
 
<script> 
 
function myFunction4() { 
 
    document.getElementById("demo2").innerHTML = "No to question 2";} 
 
</script> 
 

 

 
</body> 
 

 
<p id="demo2"></p>

Antwort

0

Meiner Meinung nach, müssen Sie Ihren zweiter setzen, dritte und ... Fragen in divs Tags mit style = "display: none"

Wenn die Benutzer auf klicken Mit der Yes-Taste können Sie ganz einfach die Anzeige ändern, um zu blocken und die nächste Frage anzuzeigen.

Eine andere Sache ist, dass Ihr HTML nicht gut formatiert ist.

Hier ist ein Beispiel für HTML.

<html> 
    <head> 
    </head> 
    <body> 
    <div>Your first question</div> 
    <div style="display:none" id="question2">Your second question</div> 

    <script> 
     You can put all your functions here 
    </script> 
    </body> 
</html> 

ich für Sie ein ganz einfaches Beispiel haben, können Sie auf den folgenden Link überprüfen:

https://jsfiddle.net/L7gp4c5g/

Hoffnung, Ihnen zu helfen!

+0

Das sieht perfekt für das, was ich brauche. Vielen Dank –

+0

Sie sind herzlich willkommen !!! –

+0

Bitte beachten Sie auch die @ doua-beri Antwort. Er verwendete eine erstaunliche JavaScript-Syntax. –

1

Verwenden css display: none; die zweite Frage zu verstecken, dann, wenn der Benutzer auf die Schaltfläche Ja klickt, können Sie es zu display:block; Hier ändern ist ein Beispiel: https://jsfiddle.net/mrpbtbgy/2/

document.querySelector("#q1Btn").addEventListener("click",()=>{ 
    document.querySelector("#question2").style.display="block"; 
}); 
0

Setzen Sie das, was Sie in ein ausblenden möchten div versteckt:

<div id="question2" style="visibility: hidden"> 
    <button onclick="onClick(2)">Yes</button> 
    <button onclick="onClick(2)">no</button> 
</div> 

verwenden javascript programmatisch oder neben div zeigen zu verbergen:

<script> 
    function onClick(button) { 
     document.getElementById('question' + (button + 1)).style.visibility = "visible" 
    } 
</script> 
0

Als andere hätte ich gesagt: Wenn Sie die Ergebnisse am Ende aller Fragen erhalten möchten. (Wenn Benutzer verlassen, erhalten Sie nichts.)

Eine Lösung wäre, jede Frage in versteckten divs, auf der gleichen Seite, und zeigt sie nach jeder Validierung. Auf diese Weise müssen Sie keine Inhalte einfügen und entfernen. Beispiel:

function showquestion(number){ 
 
$("#question"+number).removeClass("hidden"); // Show the next question 
 
$("#question"+(number-1)).addClass("hidden"); // Hide the current question 
 
}
.hidden{display:none; 
 
visibility : hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="question1" class=""> Mauvaise réponse</div> 
 
<div id="question1" class=""> Question 1 <button type="button" onclick="showquestion(0)">yes</button><button type="button" onclick="showquestion(2)">No</button></div> 
 
<div id="question2" class="hidden"> Question 2 <button type="button" onclick="showquestion(0)">yes</button><button type="button" onclick="showquestion(3)">no</button></div> 
 
<div id="question3" class="hidden"> Question 3 <button type="button" onclick="showquestion(0)">yes</button><button type="button" onclick="showquestion(4)">no</button></div>

Aber wir vergessen, die „ja/nein“ Teil, noch über die Sichtbarkeit der Frage Lösung innerhalb des Quellcodes sprechen.

Die korrekte Vorgehensweise wäre ein Ajax-Aufruf bei jeder Fragevalidierung: Der Benutzer sendet die Antwort an ein PHP-Skript, dieses Skript überprüft die Antwort oder sendet den Inhalt, der dem Benutzer hinzugefügt wird Seite. Es ist die einzige Möglichkeit für den Benutzer nicht zu betrügen, und es ermöglicht Ihnen, seine Antwort bei jedem Schritt zu speichern (wenn Sie etwas speichern).

Verwandte Themen