Блог

Моя первая функция, скрывающая вопрос до нажатия кнопки «Пуск», работает. Работает вторая функция, которая показывает первый вопрос викторины и скрывает кнопку запуска викторины. После этого, после ответа на первый вопрос, я хочу отобразить следующий вопрос и скрыть первый вопрос, но это не работает.

     <button id="btn1">High Scores</button>
    <button id="btn2">Start Quiz</button>
    
    <p class='question1'>Question 1:<br><br>
        "What does HTML stand for?"<br><br>
        <button id="btnA">A  Hyper text Markeup Language</button><br>
        <button id="btnB">B Hyperlinks and Text Markup Languages</button><br>
        <button id="btnC">C Home Tool Markup Language</button><br></p>
        
    <p class='question2'>Question 2:<br><br>
        "What does CSS stand for?"<br><br>
        <button id="btn2A">A  Completely Self Sufficient</button><br>
        <button id="btn2B">B Computer Style Sheet</button><br>
        <button id="btn2C">C Cascading Style Sheet</button><br></p>

    <p class='question3'>Question 3:<br><br>
        "What is the purpose of a Bootcamp?"<br><br>
        <button id="btn3A">A  To teach you perseverance</button><br>
        <button id="btn3B">B To teach you to find your own solutions</button><br>
        <button id="btn3C">C Both A and B</button><br></p>

    <p class='question4'>Question 3:<br><br>
        "What is the correct way to link a javascript file?"<br><br>
        <button id="btn4A">A  Make sure it appears within the body section</button><br>
        <button id="btn4B">B Use the script tags</button><br>
        <button id="btn4C">C There is no need for a link, html finds it on its own</button><br></p>  
</div>

<script>
var score = 0

    // hides the question until start quiz is clicked
    $(document).ready(function() {
    $('.question1').hide();
    });

    // start button is clicked, shows the first question and hides start button
    $('#btn2').on('click', function() {
        $('.question1').show();
        $('#btn2').hide();
    });

    // When an answer is clicked, the question gets hidden and the next question is shown.
    $('#btnA').on('click', function() {
        $('.question1').hide();
        $('.question2').show();
        score  
    });

    $('#btnB').on('click', function(){
        $('.question1').hide();
        $('.question2').show();
    });

    $('#btnC').on('click', function(){
        $('.question1').hide();
        $('.question2').show();
    });


    
</script>
  

Ваш javascript будет очень длинным, если вы сделаете это таким образом.

Вы можете выполнить всю работу в этих строках

 // For adding scores
$('#btnA, #btn2B, #btn3x, ....').click(function() { 
  score  ; 
});

// for hiding and showing 
// do change all classes to just 'question'
// or use [class^=question] as the selector
$('.question > button').click(function() {
  $(this).parent().hide().next('.question').show();
});
  

Ваши триггеры кнопок находятся за пределами вашего DO READY

    $(document).ready(function() {
    $('.question1').hide();
    //});// close this at the end...

    // start button is clicked, shows the first question and hides start button
    $('#btn2').on('click', function() {
        $('.question1').show();
        $('#btn2').hide();
    });

    // When an answer is clicked, the question gets hidden and the next question is shown.
    $('#btnA').on('click', function() {
        $('.question1').hide();
        $('.question2').show();
        score  
    });

    $('#btnB').on('click', function(){
        $('.question1').hide();
        $('.question2').show();
    });

    $('#btnC').on('click', function(){
        $('.question1').hide();
        $('.question2').show();
    });
}); // close dom ready here