Robiam grę "prawdziwą czy fałszywą". Tytuły twierdzenia pojawiają się na ekranie jeden po drugim. Użytkownik reaguje na każde stwierdzenie z kolei. W sumie jest 5 oświadczeń. - Jeśli użytkownik kliknął przycisk FAISS, pojawi się następującą instrukcję. A jeśli to prawda, pojawi się opis. Możesz przejść do następnego pytania, klikając białe koło pod nagłówkami, które zamienia się w Red, jeśli odpowiedź została już podana (dowolna) lub klikając dalej.

Jaki jest najlepszy sposób na zmianę pytań bez ponownego ładowania strony i sprawić, że kręgi nawigacyjne są aktywne w czystym JS? Dostępny kod i przybliżony widok funkcjonalności są poniżej:

<h1>statement 1</h1>
<div id="text" style="display:none;">Text of statement</div>
<button onclick="chpok('text')"><h2 onclick="chpok('arrow')">True</h2></button>
<button onclick="chpok('arrow')"><h2>False</h2></button>
<h2 id="arrow" onclick="chpok('block1')" style="display:none;">Next</h2>

<div class="block1" id="block1" style="display: none;">
  <h1>statement 2</h1>
  <div id="text2" style="display:none;">Text of statement</div>
  <button onclick="chpok('text2')"><h2 onclick="chpok('arrow2')">True</h2></button>
  <button onclick="chpok('arrow2')"><h2>False</h2></button>
  <h2 id="arrow2" onclick="chpok('block2')" style="display:none;">Next</h2>
</div>

<div class="block2" id="block2" style="display: none;">
  <h1>statement 3</h1>
  <div id="text3" style="display:none;">Text of statement</div>
  <button onclick="chpok('text3')"><h2 onclick="chpok('arrow3')">True</h2></button>
  <button onclick="chpok('arrow3')"><h2>False</h2></button>
  <h2 id="arrow3" style="display:none;">Next</h2>
</div>

<script>function chpok(id) {
  elem=document.getElementById(id);
  state=elem.style.display;
  if (state=='none') elem.style.display='';
}</script>
enter image description here
0
All In 22 październik 2020, 11:21

1 odpowiedź

Najlepsza odpowiedź

To bardzo szerokie pytanie, ale spróbuję odpowiedzieć na to, przełamując go trochę. W tym pytaniu jest trzy problemy.

  1. Jak wyświetlić informacje z JS w Domu?
  2. Jak mogę działać na przycisk naciśnij, aby zaktualizować te informacje?
  3. Jak możemy śledzić, które pytania zostały odebrane?

Zacznijmy od wydania # 1: W przypadku tego zadania pomaga najpierw utrudniać strukturę pytania w JavaScript lub JSON. Każde pytanie ma 4 informacje: statement, description, correctAnswer, answer.
Musimy również utworzyć funkcję, która obsługuje przypisanie wartości do domu. W tym przykładzie zadzwonimy do tego selectTask(id) Będziemy uruchomić to na uruchomieniu.

W przypadku wydania # 2 możemy ponownie wykorzystać funkcję selectTask(id), aby wyświetlić następną odpowiedź, ale powinniśmy dodać kolejną funkcję o nazwie answer(value), która bierze co odpowiedział jako argument, ta funkcja ustawia {{x2 }} Pole Twojego oświadczenia Obiekt i wywołuje Seleclask do następnego zadania. Aby uruchomić funkcję JS, możesz użyć "Onclick".

Wreszcie, aby wydać # 3, musimy zastosować pewną stylizację do przycisków przeglądowych, aby wskazać, które są poprawne lub fałszywe, a niezależnie od tego, czy w ogóle odpowiedzieli. Na szczęście mamy pola answer dla każdego zadania, abyśmy mogli tego użyć. Dodano również wybrane miejsce w OnClick z przycisków Przegląd, aby włączyć nawigację w tę iz powrotem.

    var currentTask = 0;
    var tasks = [
      {
        statement:"Food and water is essential to surviving",
        description: "Consuming edibles and liquids is a crucial part of human survival.",
        correctAnswer: true,
        answer:null
      },
      {
        statement:"Asking questions on SA is stupid",
        description: "Despite what some may think, asking question on stack overflow doesn't make you a bad programmer",
        correctAnswer: false,
        answer:null
      },
      {
        statement:"Computer science is fun!",
        description: "Enough said.",
        correctAnswer: true,
        answer:null
      }
    ]

    function selectTask(id){
      if(id < 0 || id >= tasks.length) return; //Invalid ID entered.
      
      currentTask = id;
      
      document.getElementById("statement").innerText = tasks[currentTask].statement
      document.getElementById("description").innerText = tasks[currentTask].description      
    }
    
    function answer(value){
      tasks[currentTask].answer = value;
      console.log(value, currentTask)
      for(var task in tasks){
        if(tasks[task].answer === null){ /* do nothing*/}        
        else if(tasks[task].answer === tasks[task].correctAnswer)
          document.getElementById("task"+task).style.backgroundColor = "green"   
        else if(tasks[task].answer !== tasks[task].correctAnswer)
          document.getElementById("task"+task).style.backgroundColor = "red"   
      }
      
      if(currentTask < tasks.length-1){
        selectTask(currentTask+1)
      }
      
    }
    
    selectTask(0);
<div>
<p id="statement"></p>
<p id="description"></p>
<button onclick="javascript:answer(true)">True</button>
<button onclick="javascript:answer(false)">False</button>

<div id="overview">
  <button id="task0" onclick="javascript:selectTask(0)">1</button>
  <button id="task1" onclick="javascript:selectTask(1)">2</button>
  <button id="task2" onclick="javascript:selectTask(2)">3</button>
</div>
</div>
1
Simen Fjellstad 22 październik 2020, 09:35