Для L oop, показывающего только последнее значение, как я могу показать каждое из них? - PullRequest
Новая
       5

Для L oop, показывающего только последнее значение, как я могу показать каждое из них?

0 голосов
/ 01 февраля 2020 

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Quiz</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <header>QUICKY QUIZ!</header>
  <section class="container-fluid d-flex justify-content-center align-content-center" id="index-btn-grid">
  </section>

  <div class="container"></div>
  <footer>
  </footer>
</body>

</html>

Я точно знаю, что этот вопрос задавался слишком много раз, но как новый человек, изучающий JavaScript, он может быть немного ошеломляющим, я думаю, вы можете сказать, , Поэтому в настоящее время я пытаюсь создать приложение для викторины, в котором вопросы и ответы изменяются при нажатии «Далее». Как бы глупо это ни звучало, я получил следующую кнопку, чтобы наконец-то сработать, и мне наконец удалось заставить следующий вопрос всплыть в поле.

Я намерен использовать каждое значение для l oop, и каждое новое значение отображается при отображении кнопки «Далее». Например:

Пример: мой массив будет [a, b, c, d]

Когда я нажимаю «next» после начала с «a», я собираюсь указать «b» "чтобы всплыть, то" 1024 * "всплывет после повторного нажатия" далее ".

Вместо этого, когда я нажимаю" следующий "после" а ", появляется" d ".

Я старался изо всех сил и потратил достаточно времени на чтение других тем и «поиск в гугле», но сейчас для меня довольно сложно понять решения, которые «на высоте» с чужим кодом и отличным форматированием, сейчас трудно понять быть нуб.

Итак, вот что у меня есть, пожалуйста, дайте мне знать, что я могу сделать, чтобы достичь своей цели. Я бы не стал добавлять еще одну каплю в ведро с такими вопросами, но мне нужна помощь, потому что я сейчас в тупике. После того, как я разобрался с вопросами, я хочу сделать кнопки с тем, что я изучил. Я был на YouTube, MDN, w3 и видел темы об этом .... Не обращайте внимания на мой кластер, и я ценю время. Спасибо, ребята! 


let questionEl = document.getElementById('question');

const questions = [
{
  question: 'What color is the White House',
  answers:[

    { text: 'White', correct: true},
    { text: 'Black', correct: false},
    { text: 'Grey', correct: false},
    { text: 'Blue', correct: false},

          ]
},   
{
  question: 'What color is Rainbow?',
  answers:[

    { text: 'All of Them', correct: true},
    { text: 'Apple', correct: false},
    { text: 'Only Brown', correct: false},
    { text: 'Ford Mustang', correct: false},


          ]
},   
{
  question: '9 + 1 =?',
  answers:[

    { text: '10', correct: true},
    { text: '9', correct: false},
    { text: '01', correct: false},
    { text: '91', correct: false},

          ]
},      
];

function showQuestion(){

  let questionEl = document.getElementById("question").innerHTML = questions[0].question;
  var answerButtonsEl = document.getElementById("answer0").innerHTML = questions[0].answers[0].text;
  var answerButtonsEl = document.getElementById("answer1").innerHTML = questions[0].answers[1].text;
  var answerButtonsEl = document.getElementById("answer2").innerHTML = questions[0].answers[2].text;
  var answerButtonsEl = document.getElementById("answer3").innerHTML = questions[0].answers[3].text;

};

function nextQuestionSet(){
  for (let i = 0; i < 3; i++) {
  document.getElementById("question").innerHTML = (questions[i].question); }

};

Ответы [ 2 ]

1 голос
/ 01 февраля 2020

использовать глобальную переменную для подсчета текущего вопроса при выполнении следующего, например 

var count=0;
function nextQuestionSet(){
count++;
if(count<7) { 
 document.getElementById("question").innerHTML = (questions[count].question); 
 document.getElementById("answer0").innerHTML = questions[count].answers[0].text; 
 document.getElementById("answer1").innerHTML = questions[count].answers[1].text; 
 document.getElementById("answer2").innerHTML = questions[count].answers[2].text;
 document.getElementById("answer3").innerHTML = questions[count].answers[3].text; 
}
else{
// you are already on last question 
}
};
0 голосов
/ 01 февраля 2020

Полагаю, вы ищете что-то подобное? 

const questions = 
      [ { question: 'What color is the White House'
        , answers: 
          [ { text: 'White', correct: true  } 
          , { text: 'Black', correct: false } 
          , { text: 'Grey',  correct: false } 
          , { text: 'Blue',  correct: false } 
        ] } 
      , { question: 'What color is Rainbow?'
        , answers: 
          [ { text: 'All of Them',  correct: true  } 
          , { text: 'Apple',        correct: false } 
          , { text: 'Only Brown',   correct: false } 
          , { text: 'Ford Mustang', correct: false } 
        ] } 
      , { question: '9 + 1 =?'
        , answers: 
          [ { text: '10', correct: true  } 
          , { text:  '9', correct: false } 
          , { text: '01', correct: false } 
          , { text: '91', correct: false } 
      ] } ] 

const hmi=
      { question   : document.getElementById('question')
      , Answer     : document.querySelectorAll('#answer-buttons button')
      , No_Question: -1
      , nb_Question: questions.length 
      , responses  : []
      }
const timer=
      { chrono : document.getElementById('chrono')
      , ref    : null
      , delay  : '2m 25s'
      , timeEnd: null
      }
const one_Sec     = 1000
  ,   one_Min     = one_Sec *60
  ,   hmi_score   = document.getElementById('score')
  ,   hmi_Buttons = document.querySelector('#answer-buttons')
  ;
function SetQuestion()
  {
  let isQuestion = (hmi.No_Question < hmi.nb_Question)
  hmi.question.textContent                  = isQuestion ? questions[ hmi.No_Question ].question : 'Quizz ending'
  hmi.Answer.forEach((el,n)=>
    {
    el.value       = n
    el.textContent = isQuestion ? questions[ hmi.No_Question ].answers[n].text : '---'
    })
  }
hmi_Buttons.onclick=e=>
  {
  if (!e.target.matches('button')) return

  if (hmi.No_Question<0)
    { startChrono() }
  else
    { hmi.responses.push({ qNo: hmi.No_Question, resp: parseInt(e.target.value )}) }
  hmi.No_Question++
  SetQuestion()  

  if (hmi.No_Question === hmi.nb_Question)
    { Quizending()  }
  }
function startChrono()
  {
  timer.chrono.textContent =  timer.delay

  timer.timeEnd = new Date().getTime() + get_MS( timer.delay )

  timer.ref = setInterval(_=>
    {
    let now = new Date().getTime()
      , tim = timer.timeEnd - now
      ;
    if ( tim<=0 )
      {
      tim=0
      Quizending()
      }
    timer.chrono.textContent = ` ${Math.floor(tim/one_Min)}m ${Math.floor((tim % one_Min )/one_Sec)}s`   
    }
    ,one_Sec);
  }
function Quizending()
  {
  clearInterval(timer.ref) 
  hmi.No_Question = hmi.nb_Question
  SetQuestion()  

  // score...
  let Points = hmi.responses.reduce((a,c)=>a+=questions[c.qNo].answers[c.resp].correct ? 1:0,0)

  hmi_score.textContent = `Score = ${Points} / ${hmi.nb_Question}` 

  // console.log( JSON.stringify(hmi.responses,0,2) )
  }

// converse delay string 'Xm Ys' to milliseconds
function get_MS (timer_val)
  {
  let vDelay = { m:0, s:0 }
    , vNum   = '0'
    , ret    = { add: 0, dis: ''}
  for (const c of timer_val)
    {
    if (/[0-9]/.test(c) )
      { vNum += c }
    if (/[ms]/.test(c) )
      {
      vDelay[c] = parseInt(vNum)
      vNum      = '0'
    } }
  return (vDelay.m*one_Min)+(vDelay.s*one_Sec)
  }
#answer-buttons button {
  display: block;
  float: left;
  clear: both;
  width: 20em;
  margin: .4em;
}
<h5 id="chrono">?</h5>
<h4 id="question">Quizz</h4>
<h5 id="score"></h5>
<div id="answer-buttons" class="btn-grid">
  <button class="btn"> click any button to start ! </button>
  <button class="btn"> click any button to start ! </button>
  <button class="btn"> click any button to start ! </button>
  <button class="btn"> click any button to start ! </button>
</div>

Мне нравится код хронос (get_MS от Изменить скрипт обратного отсчета, чтобы разрешить несколько отсчетов на странице )

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...