【转】js实现上一题,下一题切换小demo

本来我的实现是类似分页,每次上一题,下一题,都去请求一下服务器数据,根据题目序号显示到页面上,但是这样子效率太低下,

这里的demo代码,直接等于是把所有的题目都请求了出来,然后JavaScript控制切换题目了,其实这样子效率可能会更高一点的感觉,感觉是比较好的实现方式了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测验表2</title>
    <style type="text/css">
        @import url(https://fonts.googleapis.com/css?family=Work+Sans:300,600);

        body{
            font-size: 20px;
            font-family: 'Work Sans', sans-serif;
            color: #333;
          font-weight: 300;
          text-align: center;
          background-color: #f8f6f0;
        }
        h1{
          font-weight: 300;
          margin: 0px;
          padding: 10px;
          font-size: 16px;
          background-color: #444;
          color: #fff;
        }
        .question{
          font-size: 30px;
          margin-bottom: 10px;
        }
        .answers {
          margin-bottom: 20px;
          text-align: left;
          display: inline-block;
        }
        .answers label{
          display: block;
          margin-bottom: 10px;
        }
        button{
          font-family: 'Work Sans', sans-serif;
            font-size: 16px;
            background-color: #279;
            color: #fff;
            border: 0px;
            border-radius: 3px;
            padding: 10px;
            cursor: pointer;
            margin-bottom: 20px;
            margin-top: 20px;
        }
        button:hover{
            background-color: #38a;
        }
        .slide{
          position: absolute;
          left: 0px;
          top: 0px;
          width: 100%;
          z-index: 1;
          opacity: 0;
          transition: opacity 0.5s;
        }
        .active-slide{
          opacity: 1;
          z-index: 2;
        }
        .quiz-container{
          position: relative;
          height: 200px;
          margin-top: 40px;
        }
    </style>
</head>
<body>
    <h1>测试表</h1>
    <div class="quiz-container">
      <div id="quiz"></div>
    </div>
    <button id="previous">前一题</button>
    <button id="next">下一题</button>
    <button id="submit">提交</button>
    <div id="results"></div>
    <script type="text/javascript">
        (function() {
          const myQuestions = [
            {
              question: "“大煮干丝”是哪个菜系的代表菜之一( )。",
              answers: {
                A: "四川菜系",
                B: "山东菜系",
                C: "广东菜系",
                D: "淮扬菜系"
              },
              correctAnswer: "D"
            },
            {
              question: "红茶属于( )茶。",
              answers: {
                A: "半发酵",
                B: "发酵",
                C: "不发酵",
                D: "微发酵"
              },
              correctAnswer: "A"
            },
            {
              question: "满汉全席起兴于( )。",
              answers: {
                A: "清代",
                B: "唐代",
                C: "宋代",
                D: "两汉"
              },
              correctAnswer: "A"
            }
          ];

          function buildQuiz() {
            // we'll need a place to store the HTML output
            const output = [];

            // for each question...
            myQuestions.forEach((currentQuestion, questionNumber) => {
              // we'll want to store the list of answer choices
              const answers = [];

              // and for each available answer...
              for (letter in currentQuestion.answers) {
                // ...add an HTML radio button
                answers.push(
                  `<label>
                     <input type="radio" name="question${questionNumber}" value="${letter}">
                      ${letter} :
                      ${currentQuestion.answers[letter]}
                   </label>`
                );
              }

              // add this question and its answers to the output
              output.push(
                `<div class="slide">
                   <div class="question"> ${currentQuestion.question} </div>
                   <div class="answers"> ${answers.join("")} </div>
                 </div>`
              );
            });

            // finally combine our output list into one string of HTML and put it on the page
            quizContainer.innerHTML = output.join("");
          }

          function showResults() {
            // gather answer containers from our quiz
            const answerContainers = quizContainer.querySelectorAll(".answers");

            // keep track of user's answers
            let numCorrect = 0;

            // for each question...
            myQuestions.forEach((currentQuestion, questionNumber) => {
              // find selected answer
              const answerContainer = answerContainers[questionNumber];
              const selector = `input[name=question${questionNumber}]:checked`;
              const userAnswer = (answerContainer.querySelector(selector) || {}).value;

              // if answer is correct
              if (userAnswer === currentQuestion.correctAnswer) {
                // add to the number of correct answers
                numCorrect++;

                // color the answers green
                answerContainers[questionNumber].style.color = "lightgreen";
              } else {
                // if answer is wrong or blank
                // color the answers red
                answerContainers[questionNumber].style.color = "red";
              }
            });

            // show number of correct answers out of total
            resultsContainer.innerHTML = `你答对了${myQuestions.length}中的${numCorrect}`;
          }

          function showSlide(n) {
            slides[currentSlide].classList.remove("active-slide");
            slides[n].classList.add("active-slide");
            currentSlide = n;
            
            if (currentSlide === 0) {
              previousButton.style.display = "none";
            } else {
              previousButton.style.display = "inline-block";
            }
            
            if (currentSlide === slides.length - 1) {
              nextButton.style.display = "none";
              submitButton.style.display = "inline-block";
            } else {
              nextButton.style.display = "inline-block";
              submitButton.style.display = "none";
            }
          }

          function showNextSlide() {
            showSlide(currentSlide + 1);
          }

          function showPreviousSlide() {
            showSlide(currentSlide - 1);
          }

          const quizContainer = document.getElementById("quiz");
          const resultsContainer = document.getElementById("results");
          const submitButton = document.getElementById("submit");

          // display quiz right away
          buildQuiz();

          const previousButton = document.getElementById("previous");
          const nextButton = document.getElementById("next");
          const slides = document.querySelectorAll(".slide");
          let currentSlide = 0;

          showSlide(0);

          // on submit, show results
          submitButton.addEventListener("click", showResults);
          previousButton.addEventListener("click", showPreviousSlide);
          nextButton.addEventListener("click", showNextSlide);
        })();
    </script>
</body>
</html>

  

上一篇:吴裕雄--天生自然神经网络与深度学习实战Python+Keras+TensorFlow:使用TensorFlow和Keras开发高级自然语言处理系统——LSTM网络原理以及使用LSTM实现人机问答系统


下一篇:vue列表展开收起效果