动态测试-支持

Question

我看到了这个问答码，我一直在尝试修改它，以便可以按照下面的方式运行

点击开始提问>问题(S)>回答问题(S)>问答结束

因此，基本上，用户将通过点击按钮开始测试，一旦用户回答了问题，用户就会看到每个问题的正确答案；一旦所有的问题都得到答案，用户就会在测试结束时看到他的结果。

​

/*jshint strict:false */


$(function() {

  'use strict';


  var questions = [{
    question: 'What is bacon?',
    choices: ['True', 'False'],
    correctAnswer: 0,
    answertext: 'The food of angels'
  }, {
    question: 'Jim didn\'t ate it?',
    choices: ['True', 'False'],
    correctAnswer: 1,
    answertext: 'Oh, He sure did.'
  }, {
    question: 'Did he deserve it?',
    choices: ['True', 'False'],
    correctAnswer: 0,
    answertext: 'NO, no he did not.'
  }, {
    question: 'He will make more?',
    choices: ['True', 'False'],
    correctAnswer: 0,
    answertext: 'He better be cooking.'
  }, {
    question: 'Will he eat it again?',
    choices: ['True', 'False'],
    correctAnswer: 1,
    answertext: 'As tempting as it sounds, No'
  }];

  var questionCounter = 0, //Tracks question number
    selections = [], //Array containing user choices
    quiz = $('.quiz-component'), //Quiz div object
    answer = $('.quiz-component'); //Quiz div object

  // Displays next requested element
  function displayNext() {
    quiz.fadeOut(function() {
      $('#question-area').remove();
      $('#answer-area').remove();

      if (questionCounter < questions.length) {

        var nextQuestion = createQuestionElement(questionCounter),
          answerQuestion = showAsnwerElement(questionCounter);

        //$('#answer-area').remove();
        quiz.append(nextQuestion).fadeIn();

        if (!(isNaN(selections[questionCounter]))) {
          $('input[value=' + selections[questionCounter] + ']').prop('checked', true);
        }

        // Controls display of 'prev' button
        if (questionCounter === 1) {
          $('#prev').show();
          //$('#question-area').remove();
          answer.append(answerQuestion).fadeIn();
        } else if (questionCounter === 0) {

          $('#prev').hide();
          $('#next').show();
        }

      } else {
        var scoreElem = displayScore();
        quiz.append(scoreElem).fadeIn();
        $('#next').hide();
        $('#prev').hide();
        $('#start').show();
      }
    });
  }

  // Display initial question
  displayNext();

  // Click handler for the 'next' button
  $('#next').on('click', function(e) {
    e.preventDefault();

    // Suspend click listener during fade animation
    if (quiz.is(':animated')) {
      return false;
    }
    choose();

    // If no user selection, progress is stopped
    if (isNaN(selections[questionCounter])) {
      //$('.qalert').remove();
      $('.question').append('<p class=\'qalert\'>Please make a selection!<p>');
    } else {
      questionCounter++;
      displayNext();
    }
  });

  // Click handler for the 'prev' button
  $('#prev').on('click', function(e) {
    e.preventDefault();

    if (quiz.is(':animated')) {
      return false;
    }
    choose();
    questionCounter--;
    displayNext();
  });

  // Click handler for the 'Start Over' button
  $('#start').on('click', function(e) {
    e.preventDefault();

    if (quiz.is(':animated')) {
      return false;
    }
    questionCounter = 0;
    selections = [];
    displayNext();
    $('#start').hide();
  });

  // Animates buttons on hover
  $('.button').on('mouseenter', function() {
    $(this).addClass('active');
  });

  $('.button').on('mouseleave', function() {
    $(this).removeClass('active');
  });

  // Creates and returns the div that contains the questions and 
  // the answer selections
  function createQuestionElement(index) {
    var qElement = $('<div>', {
      id: 'question-area'
    });

    var header = $('<p class=\'question-number\'>Question ' + (index + 1) + ':</p>');
    qElement.append(header);

    var question = $('<p class=\'question\'>').append(questions[index].question);
    qElement.append(question);

    var radioButtons = createRadios(index);
    qElement.append(radioButtons);

    return qElement;
  }

  // Creates a list of the answer choices as radio inputs
  function createRadios(index) {
    var radioList = $('<ul>'),
      item,
      input = '';

    for (var i = 0; i < questions[index].choices.length; i++) {
      item = $('<li>');
      input = '<input type="radio" name="answer" value=' + i + ' />';
      input += questions[index].choices[i];
      item.append(input);
      radioList.append(item);
    }
    return radioList;
  }

  // Creates and returns the div that contains the correct anwser 
  function showAsnwerElement(index) {
    var aElement = $('<div>', {
      id: 'answer-area'
    });

    var header = $('<p class=\'correct-answers\'>').append(questions.correctAnswer).toString();
    aElement.append(header);

    var answer = $('<p class=\'answers\'>').append(questions[index].answertext);
    aElement.append(answer);

    return aElement;
  }

  // Reads the user selection and pushes the value to an array
  function choose() {
    selections[questionCounter] = +$('input[name="answer"]:checked').val();
  }



  // Computes score and returns a paragraph element to be displayed
  function displayScore() {
    var score = $('<p>', {
      id: 'question'
    });

    var numCorrect = 0;
    for (var i = 0; i < selections.length; i++) {
      if (selections[i] === questions[i].correctAnswer) {
        numCorrect++;
      }
    }

    score.append('You got <span class="correntAns">' + numCorrect + '</span> questions out of <span class="correntAns">' + questions.length + '</span> right!!!');
    return score;
  }
});

.fl-qbgi-slide {
  position: relative;
}
.img {
  visibility: hidden;
}
.fl-quiz-component {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
}
.title {
  background-color: $brand-primary;
}
p {
  text-align: center;
  padding: 5px 12px;
}
.quiz-section {
  background-color: rgba(0, 66, 131, 0.5);
  color: #FFFFFF;
  font-family: $font-family-sans-serif-condensed;
  font-size: $font-size-large;
  height: auto;
  min-height: 320px;
  position: relative;
}
.quiz-component {
  height: auto;
  margin: auto;
  padding: 20px 15px 10px;
  position: relative;
  width: 85%;
}
.button {
  background-color: $gray-light;
  color: $brand-primary;
  float: right;
  margin: 0 2px 0 2px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
}
.button.active {
  background-color: $gray-light;
  color: $brand-primary;
}
button {
  float: right;
  position: relative;
}
.button a {
  color: $brand-primary;
  text-decoration: none;
  padding: 5px 15px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#prev {
  display: none;
}
#start {
  display: none;
  width: 150px;
}
.correntAns {
  @extend %text-17px-bold-italics-caps;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
--- title: Quiz ---

<div class='fl-qbgi-slide'>
  <div class="img">
    <!--
                {{#if image}}
                    {{#with image}}
                        {{> image}}
                    {{/with}}
                {{else}}
                    {{#parseJSON '{
                        "srcDesktop": "/img-placeholders/botm-bg-grain-0.jpg",
                        "srcTablet": "/img-placeholders/botm-bg-grain-0.jpg",
                        "srcPhone": "/img-placeholders/botm-bg-grain-0.jpg",
                        "altText": "Beer of the Month Carousel Slide"
                    }'}}
                        {{> image}}
                    {{/parseJSON}}
                {{/if}}
  -->
  </div>

  <div class="fl-quiz-component">
    <div class="quiz-section">

      <div class="title">
        <p>Seafood Sustainability Quiz</p>
      </div>

      <div class='quiz-component'></div>

      <!-- handlebars temp area
                #quiz-questions}}
                <div class="question-block">
                    <p class="">{{{default quiz-question}}}</p>
                    <a class="">True</a>
                    <a class="">false</a>
                </div>
                /quiz-question}}
                -->

      <div class='button' id='next'><a href='#'>Next</a>
      </div>
      <div class='button' id='prev'><a href='#'>Prev</a>
      </div>
      <div class='button' id='start'> <a href='#'>Start Over</a>
      </div>
      <!-- 
                <button class='' id='next'>Next</a></button>
                <button class='' id='prev'>Prev</a></button>
                <button class='' id='start'> Start Over</a></button>
                -->

    </div>

  </div>
</div>

<script src="/js/apps/quiz-component/main.js"></script>

​

，我需要什么帮助，

1. 需要能够在用户提交答案之后，在显示下一个问题之前，显示出每个问题的正确答案。

我已经调整了代码，以显示答案之后，但正在显示的下一个问题在同一屏幕。需要它只显示答案，用户将点击下一步，然后下一个问题会出现。

1. 需要显示两个不同的背景图像；一个在问题期间，另一个在测试结束。

不需要，但肯定有帮助的

1. 如果我能看到这段用Handlebars.js编写的代码，那将是非常有用的，因为我正在努力学习句柄条。

Answer 1

好的，我将用javascript来回答这个问题(我对handlebars.js不太了解)。

为了在每个用户提交后显示答案，请在单选按钮上附加一个单击事件。我注意到您正在使用jquery。

   $("#trueRadioBut").on("click",function(){
        //check your answer
        if(right)
           display answerText;
           update score ...etc... 
        else
           wrong option code.   

   });

同样，对错误的收音机按钮也这样做。如果用户是正确的，这将显示answerText。

还可以使用jquery和一个额外的CSS类来改变背景。在你的css中有一个类，也许是一个背景不同的.endBackground。然后可以使用jquery的toggleClass()切换它。toggleClass()交替地为一个元素切换类。

为此，您还需要更改next按钮。向其添加一个单击事件，以获取下一个问题并重定向到下一页。当没有更多的问题时，切换背景。

$(body).toggleClass("endBackground");

这应该会改变你的背景。若要在重新启动时更改为正常背景，请将单击事件添加到您的startover按钮中，该按钮再次将类关闭。

希望我已经说清楚了。问我你是否有任何疑问。