Dynamische Umfrage mit Javascript

Ich möchte eine dynamische surverse Webseite mit JavaScript erstellen.
Ich habe 10 Fragen, die Display-Typen auf "keine" eingestellt sind, erwarten die erste/tatsächliche Fragen Displaytyp ist "Block". Jede Frage ist eine Ja-Nein-Frage. Es ist relevant, welche Antwort der Benutzer wählt, um die nächste Frage zu sehen.
Ich weiß, wie man diese statische erstellt, aber ich wollte eine dynamische Lösung für dieses Problem.
Kann jemand helfen?
ist hier ein Schema meines ProblemsDynamische Umfrage mit Javascript

Beispielcode:

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>10 Questions</title> 
 
    <script> 
 
    ... 
 
    </script> 
 
</head> 
 
<body> 
 
    <header>A Dynamic Questionaire.</header> 
 
    <section> 
 
     <article> 
 
     <hgroup> 
 
      <h1>Questionaire</h1> 
 
      <h2>Anwer the questions in order as they appear.</h2> 
 
     </hgroup> 
 
     <div id="Question1" style="display:block;"> 
 
      1. 
 
      <button type="button" id="btnYes1">Yes</button> 
 
      <button type="button" id="btnNo1">No</button> 
 
     </div> 
 
     <div id="Question2" style="display:none;"> 
 
      2. 
 
      <button type="button" id="btnYes2">Yes</button> 
 
      <button type="button" id="btnNo2">No</button> 
 
     </div> 
 
     <div id="Question3" style="display:none;"> 
 
      3. 
 
      <button type="button" id="btnYes3">Yes</button> 
 
      <button type="button" id="btnNo3">No</button> 
 
     </div> 
 
     <div id="Question4" style="display:none;"> 
 
      4. 
 
      <button type="button" id="btnYes4">Yes</button> 
 
      <button type="button" id="btnNo4">No</button> 
 
     </div> 
 
     <div id="Question5" style="display:none;"> 
 
      5. 
 
      <button type="button" id="btnYes5">Yes</button> 
 
      <button type="button" id="btnNo5">No</button> 
 
     </div> 
 
     <div id="Question5" style="display:none;"> 
 
      6. 
 
      <button type="button" id="btnYes6">Yes</button> 
 
      <button type="button" id="btnNo6">No</button> 
 
     </div> 
 
     <div id="Question5" style="display:none;"> 
 
      7. 
 
      <button type="button" id="btnYes7">Yes</button> 
 
      <button type="button" id="btnNo7">No</button> 
 
     </div> 
 
     <div id="Question5" style="display:none;"> 
 
      8. 
 
      <button type="button" id="btnYes8">Yes</button> 
 
      <button type="button" id="btnNo8">No</button> 
 
     </div> 
 
     <div id="Question5" style="display:none;"> 
 
      9. 
 
      <button type="button" id="btnYes9">Yes</button> 
 
      <button type="button" id="btnNo9">No</button> 
 
     </div> 
 
     <div id="Question5" style="display:none;"> 
 
      10. 
 
      <button type="button" id="btnYes10">Yes</button> 
 
      <button type="button" id="btnNo10">No</button> 
 
     </div> 
 
     </article> 
 
    </section> 
 
    </body> 
 
</html>

Quelle

2017-04-08 Ottospara

Warum https://surveyjs.io/ nicht benutzen? Sie können Ihre Umfrage dynamisch mithilfe des Frameworks erstellen. – cosmoonot

Ich möchte wissen, wie man dynamisches Javascript durch mein eigenes verursacht, aber ich weiß nicht, wie man beginnt, weil ich zu javascript nicht vertraut bin. – Ottospara

Wahrscheinlichkeiten sind, niemand wird es für Sie kodieren. Sie sollten es selbst programmieren und kommen, wenn Sie ein bestimmtes Problem haben (etwas funktioniert nicht so, wie Sie es erwarten und Sie können nicht herausfinden, warum). –

eine Tonne Möglichkeiten Es gibt Sie dies tun könnte. Ein schneller Ansatz wäre es, einige Informationen in die Schaltfläche einzugeben, die angeben, wohin der Benutzer als nächstes gehen soll. Also hier habe ich einen data-next Wert auf jeder Taste hinzugefügt, die der id des nächsten zu zeigenden Panels entspricht, und ich schalte eine Klasse in CSS um, Paneele ein-/auszublenden.

var buttons = document.getElementsByTagName('button'), 
 
    questions = document.getElementsByTagName('div'); 
 
for (var i = 0; i < buttons.length; i++) { 
 
    var button = buttons[i]; 
 
    button.addEventListener('click', function() { 
 
    var target = this.getAttribute('data-next'); 
 
    for (var j = 0; j < questions.length; j++) { 
 
     var question = questions[j]; 
 
     if (question.id == target) { 
 
     question.classList.add('show'); 
 
     } else if (question.classList.contains('show')) { 
 
     question.classList.remove('show'); 
 
     } 
 
    } 
 
    }); 
 
}

div { 
 
    display: none; 
 
} 
 
.show { 
 
    display: block; 
 
}

<div id="Question1" class="show"> 
 
    1. 
 
    <button type="button" data-next="Question2">Yes</button> 
 
    <button type="button" data-next="Question3">No</button> 
 

 
</div> 
 
<div id="Question2"> 
 
    2. 
 
    <button type="button" data-next="Question4">Yes</button> 
 
    <button type="button" data-next="Question5">No</button> 
 
</div> 
 
<div id="Question3"> 
 
    3. 
 
    <button type="button" data-next="Question6">Yes</button> 
 
    <button type="button" data-next="Question6">No</button> 
 
</div> 
 
<div id="Question4"> 
 
    4. 
 
    <button type="button" data-next="Question10">Yes</button> 
 
    <button type="button" data-next="Question10">No</button> 
 
</div> 
 
<div id="Question5"> 
 
    5. 
 
    <button type="button" data-next="Question10">Yes</button> 
 
    <button type="button" data-next="Question10">No</button> 
 
</div> 
 
<div id="Question6"> 
 
    6. 
 
    <button type="button" data-next="Question7">Yes</button> 
 
    <button type="button" data-next="Question8">No</button> 
 
</div> 
 
<div id="Question7"> 
 
    7. 
 
    <button type="button" data-next="Question9">Yes</button> 
 
    <button type="button" data-next="Question9">No</button> 
 
</div> 
 
<div id="Question8"> 
 
    8. 
 
    <button type="button" data-next="Question9">Yes</button> 
 
    <button type="button" data-next="Question9">No</button> 
 
</div> 
 
<div id="Question9"> 
 
    9. 
 
    <button type="button" data-next="Question10">Yes</button> 
 
    <button type="button" data-next="Question10">No</button> 
 
</div> 
 
<div id="Question10"> 
 
    10. 
 
</div>

Quelle

2017-04-08 19:14:57

Dank Ich weiß, es gibt viele Möglichkeiten, aber ich konnte nicht herausfinden, dass ich eine solche Eigenschaft wie Daten-nächste hinzufügen kann. Und kann den angezeigten HTML-Code über hinzugefügte CSS-Klassen manipulieren - das habe ich über das style.display Attribut getan. – Ottospara

@Ottospara kein Problem. In diesem Fall würde ich empfehlen, einige Anfänger-Tutorials zu Javascript zu nehmen. Es gibt viele kostenlose online. Willkommen bei Stack Overflow übrigens. –

Dynamische Umfrage mit Javascript

Antwort

Verwandte Themen