Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

how to fixed the restart button which not working

I’ve make a flashcard that will show questions that I save on array and next click to get another questions. But I have a problems if in the middle i’ve click the restart button. for example, I have 6 questions and I click restart when the progress on 3, the progress will reset to 1 and will run the question from 1 till 6, but on my code it’s continue 4 5 6.

var btnRestart=document.getElementById("restart");
var btnNext=document.getElementById("next");
var words = [{
     question: "HTML stands for",
     answer: "HyperText Markup Language"
   },
   {
     question: "What is a href?",
     answer: "Link location attribute"
   },
   {
     question: "What is extensions used to save HTML pages?",
     answer: ".html"
   },
  {
    question: "What type of video formats are supported by HTML5",
    answer: "MP4, WebM, Ogg"
  },
  {
   question: "What is _blank target attribute?",
   answer: "It is opens the document in a new window or tab"
    },
 {
   question: "How to handle events in HTML?",
    answer: "Using javaScript or jQuery."
 },
{
   question: "What is _parent target attribute?",
   answer: "It is opens the document in a parent frame"
 }
];

randomQuestions();
var count = 1;

function randomQuestions() {
  count++;

   var tempWords = [];

   for (var i = 0; i < words.length; i++) {
     tempWords.push(i);
   }

//last question
if (tempWords.length === 1) {
  btnNext.style.display = 'none';
}

let index = Math.floor(Math.random() * tempWords.length);
const question = words.splice(index, 1)[0]
document.getElementById("question").innerHTML = question.question;
}

btnNext.addEventListener('click', function(){
  randomQuestions();        
});

btnRestart.addEventListener('click', function() {
randomQuestions();
tempWords = [];
 count = 1;
})

HTML

<div id="question">
  <h4>Questions</h4>
</div>

<button id="next">Next</button>
<button id="restart">Restart</button>

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

Check if this may work for you:

var btnRestart = document.getElementById("restart");
var btnNext = document.getElementById("next");
const questionElem = document.getElementById("question")
var count = 0;
var words = [{
    question: "HTML stands for",
    answer: "HyperText Markup Language"
  },
  {
    question: "What is a href?",
    answer: "Link location attribute"
  },
  {
    question: "What is extensions used to save HTML pages?",
    answer: ".html"
  },
  {
    question: "What type of video formats are supported by HTML5",
    answer: "MP4, WebM, Ogg"
  },
  {
    question: "What is _blank target attribute?",
    answer: "It is opens the document in a new window or tab"
  },
  {
    question: "How to handle events in HTML?",
    answer: "Using javaScript or jQuery."
  },
  {
    question: "What is _parent target attribute?",
    answer: "It is opens the document in a parent frame"
  }
];
let leftWords = [...words]


randomQuestions();


function randomQuestions() {

  if (count === words.length - 1) btnNext.style.display = 'none';

  const idx = Math.round(Math.random() * (leftWords.length - 1))
  console.log("RANDOM IDX", idx, "QUESTIONS LEFT:", leftWords.length)
  questionElem.innerHTML = leftWords[idx].question;
  leftWords.splice(idx, 1)
  count++;

}

btnNext.addEventListener('click', randomQuestions);

btnRestart.addEventListener('click', function() {
  btnNext.style.display = 'inline';
  count = 0
  leftWords = [...words]
  randomQuestions();
})
<div id="question">
  <h4>Questions</h4>
</div>

<button id="next">Next</button>
<button id="restart">Restart</button>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading