current position:Home>A simple Vue answer demo, single choice and multiple choice

A simple Vue answer demo, single choice and multiple choice

2022-05-15 02:02:32rojie0

Copy and paste to see the finished product , See the code for yourself
results :
 Insert picture description here

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<style>
  * {
    
    padding: 0;
    box-sizing: border-box;
    font-size: 14px;
  }

  .question {
    
    margin-top: 50px;
    width: 500px;
    /* height: 200px; */
    background-color: rgb(240, 240, 240);
    border-radius: 10px;
    padding: 20px;
    color: rgb(81, 81, 82);
    font-size: 16px;
  }

  button {
    
    margin-top: 15px;
    margin-right: 10px;
    outline: none;
    background-color: rgb(255, 153, 98);
    border: 0;
    padding: 10px;
    color: rgb(61, 61, 61);
    border-radius: 5px;
  }

  button:active {
    
    background-color: rgba(248, 161, 121, 0.664);
  }

  #app {
    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .title {
    
    color: black;
    font-weight: 600;
    font-size: 18px;
    height: 30px;
    line-height: 30px;
  }

  .list {
    

    margin-top: 10px;
    padding: 10px 5px;
    font-size: 16px;
    border: 1px rgb(46, 46, 46) solid;
    border-radius: 10px;
  }

  .bgc {
    

    border: 1px rgb(250, 109, 0) solid;
    color: aliceblue;
    background-color: rgb(240, 125, 38);
  }

  .answer {
    
    color: brown;
    font-size: 16px;
    margin-left: 20px;
  }

  .select {
    
    font-size: 18px;
    color: rgb(243, 25, 25);
  }
</style>

<body>
  <div id="app">
    <div v-for="(item,index) in question" :key="index" v-show="index==idx" class="question">
      <div class="title">
        <span v-if="item.ismultiple" class="select"> multi-select </span>
        <span v-else="item.ismultiple" class="select"> The radio </span>
         subject :{
    {
    item.name}}
        <span class="answer" v-show="answerShow"> answer :{
    {
    item.answer}}</span>
        <span style="float: right;">{
    {
    idx+1}}/{
    {
    question.length}}</span>
      </div>
      <div>
        <div :class="val.checked ? 'bgc' : ''" v-for="val in item.option" :key="val.id" class="list"
          @click="handleCilck(val)">{
    {
    val.letter}}.
          {
    {
    val.name}}</div>
      </div>
    </div>
    <div>

      <button @click="back()" :style="idx == 0 ? 'background-color:#ccc;':''"
        :disabled="idx == 0 ? true : false"> Last question </button>
      <button @click="next()" :style="idx == question.length - 1 ? 'background-color:#ccc;':''"
        :disabled="idx == question.length - 1 ? true : false"> Next question </button>
      <button @click="sumbit" style="background-color: rgb(250, 142, 0);color: aliceblue;"> Submit </button>
      <button v-show="isshow" @click="answerShow = true"
        style="background-color: rgb(238, 190, 79);color: rgb(255, 255, 255);"> Check the answers </button>
    </div>
  </div>
  <script>
    var app = new Vue({
    
      el: '#app',
      data: {
    
        idx: 0,
        allSocre: 0,
        isshow: false,
        answerShow: false,
        ismultipleAnswer: [],
        question: [
          {
    
            id: 1,
            ismultiple: false,
            name: ' What day is today ?',
            answer: 'A',
            score: 2,
            option: [
              {
    
                id: 1,
                name: ' Monday ',
                checked: false,
                letter: 'A'
              },
              {
    
                id: 2,
                name: ' Wednesday ',
                checked: false,
                letter: 'B'
              },
              {
    
                id: 3,
                name: ' Thursday ',
                checked: false,
                letter: 'C'
              },
            ],

          },
          {
    
            id: 2,
            ismultiple: false,
            name: ' What would you like to eat ?',
            answer: 'C',
            score: 2,
            option: [
              {
    
                id: 1,
                name: ' Banana ',
                checked: false,
                letter: 'A'
              },
              {
    
                id: 2,
                name: ' Apple ',
                checked: false,
                letter: 'B'
              },
              {
    
                id: 3,
                name: ' a mandarin orange ',
                checked: false,
                letter: 'C'
              },
            ],

          },
          {
    
            id: 3,
            ismultiple: false,
            name: ' What is your dream ?',
            answer: 'B',
            score: 2,
            option: [
              {
    
                id: 1,
                name: ' Be a programmer ',
                checked: false,
                letter: 'A'
              },
              {
    
                id: 2,
                name: ' Be a tester ',
                checked: false,
                letter: 'B'
              },
              {
    
                id: 3,
                name: ' Be an operator ',
                checked: false,
                letter: 'C'
              },
            ],

          },
          {
    
            id: 4,
            ismultiple: true, // Whether to choose more than one 
            name: ' Is this a multiple choice question ?',
            answer: 'BC',
            score: 2,
            option: [ // Options 
              {
    
                id: 1,
                name: ' No ',
                checked: false,
                letter: 'A'
              },
              {
    
                id: 2,
                name: ' Yes ',
                checked: false,
                letter: 'B'
              },
              {
    
                id: 3,
                name: ' Yes ',
                checked: false,
                letter: 'C'
              },
            ],

          },
          {
    
            id: 5,
            ismultiple: true, // Whether to choose more than one 
            name: ' More choices ?',
            answer: 'ABC',
            score: 2,
            option: [ // Options 
              {
    
                id: 1,
                name: ' Yes ',
                checked: false,
                letter: 'A'
              },
              {
    
                id: 2,
                name: ' Yes ',
                checked: false,
                letter: 'B'
              },
              {
    
                id: 3,
                name: ' Yes ',
                checked: false,
                letter: 'C'
              },
            ],

          },
        ]
      },
      methods: {
    
        next () {
    
          this.idx++
        },
        back () {
    
          this.idx--
        },
        handleCilck (info) {
    
          let question = this.question[this.idx]  // Options for each question 
          let option = this.question[this.idx].option // Options for each question 

          // Check add style 
          option.forEach(item => {
    
            if (item.id == info.id) {
      // If the selected is equal to the one in the data, change its style 
              item.checked = !item.checked  //  Is it checked? , Take the opposite  
            } else if (!question.ismultiple) {
      // If not multiple choices   Only one can be selected   Everything else false
              item.checked = false
            }
          });


          let isAnswer = info.letter // The selected answer 
          let answer = this.question[this.idx].answer // The answer to the question 

          // If it's multiple choice 
          if (question.ismultiple) {
    
            this.ismultipleAnswer = []
            option.forEach(item => {
    
              if (item.checked) {
     // Will be selected push To  ismultipleAnswer  Array 
                this.ismultipleAnswer.push(item.letter)
              }
            });
            isAnswer = this.ismultipleAnswer.join('')  // take ismultipleAnswer To string   Compare the following with the answer 
          }


          console.log(' The selected answer ', isAnswer);
          console.log(' Answer to the question ', answer);


          // Judge whether you choose the right , score 

          if (isAnswer == answer) {
     //  If the answer chosen is equal to the answer to the question ,isOk  That means you're right 
            this.question[this.idx].isOk = true
          } else {
    
            this.question[this.idx].isOk = false
          }

        },

        //  Submit to calculate the score 
        sumbit () {
    
          this.allSocre = 0  // Calculate the total score first 0,, In the calculation 
          let result = []  // Define the number of selected 
          this.question.forEach(item => {
    
            // Returns whether the array is selected 
            let selsetArr = item.option.map(val => {
    
              if (val.checked) {
    
                return val.checked //map Finally return an array , return  checked  Array of 
              }
            })
            console.log('selsetArr', selsetArr);
            // Does this include true, contain  true  Just push To result in 
            const isTrue = selsetArr.includes(true)  // If include return true, Otherwise return to false
            // Here's to judge , If  isTrue  yes  true, The description contains true  That means you chose 
            if (isTrue) {
    
              result.push(isTrue)  // If you chose , Just push To  result  in 
            }

            if (item.isOk) {
     // If isOK  by  true  It means you chose it , score 
              this.allSocre += item.score
            }
          })
          // Use the selection  result  The length of   And   The length of the topic is relatively   Is it equivalent to   You can't wait to finish 
          if (result.length < this.question.length) {
    
            alert(' There are still problems left to be solved ')
            return
          }

          setTimeout(() => {
    
            alert(' Get points :' + this.allSocre)
            this.isshow = true
          }, 100);

        }
      }
    })
  </script>
</body>

</html>

copyright notice
author[rojie0],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205120528099750.html

Random recommended