クイズ　問題の文章を少しずつ表示

Javascriptの練習のために、以下のようなクイズを作りました。
もう少し改良しようと、以下の挙動を導入したいと思っております。
「問題の文章の箇所は、１文字ずつ出てくるようにして、早押し形式にしてみる」
例）世・界・で・１・番・大・き・な〜　といった感じです。

setintervalなどを使って、１００ms毎に問題を出していくような処理をするやり方などがある、と調べた結果わかったのですが、
もう少しヒント、特にとっかかりをどういう風に書いたらいいか等、のヒントを頂けると助かります。よろしくお願いいたします。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>Quiz</title>
 <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <p id="timer"></p>
    <p id="scoreShow"></p>
    <p id="question"></p>
    <ul id="choices">
      <!-- <li>A0</li>
      <li>A1</li>
      <li>A2</li> -->
    </ul>
    <div id="btn" class="disabled">Next</div>

    <section id="result">
      <p></p>
      <a href="">REPLAY?</a>
    </select>
  </div>

<script src="js/main.js"></script>
</body>
</html>

body {
  background: #efdec1;
  font-size: 14px;
  font-family: Verdana, sans-serif;
}

.container {
  width: 400px;
  margin: 8px auto;
  background: #fff;
  border-radius: 4px;
  padding: 16px;
  position: relative;
}

#question {
  margin-bottom: 16px;
  font-weight: bold;
}

#choices {
  list-style: none;
  padding: 0;
  margin-bottom: 16px;
}

#choices > li {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

#choices > li:hover{
  background: #f8f8f8;
}

#btn {
  background: #3498db;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
  text-align: center;
  box-shadow: 0 4px 0 #2880b9;
}

#btn.disabled {
  background: #ccc;
  box-shadow: 0 4px 0 #bbb;
  opacity: 0.7;
}

#choices > li.correct {
  background: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
  font-weight: bold;
}

#choices > li.correct::after {
  content: "....Correct!";
}

#choices > li.wrong {
  background: #f8d8da;
  border-color: #f5c6cb;
  color: #721c24;
  font-weight: bold;
}

#choices > li.wrong::after {
  content: "....Wrong!";
}

#result {
  position: absolute;
  width: 300px;
  background: #fff;
  padding: 30px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  top: -500px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 3px;
  text-align: center;
  transition: 0.4s ease-out;
}

#result > p {
  font-size: 14px;
}

#result > a {
  background: #3498db;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
  text-align: center;
  box-shadow: 0 4px 0 #2880b9;
  display: block;
  text-decoration: none;
}

#result.show {
  top: 50px;
}

#btn.startgreen{
  background: lightgreen;
  box-shadow: 0 4px 0 green;
}

#scoreShow {
  float: right;
  color: purple;
}

'use strict';

{
 const question = document.getElementById('question');
 const btn = document.getElementById('btn');
 const choices = document.getElementById('choices');
 const result = document.getElementById('result');
 const timer = document.getElementById('timer');
 const scoreLabel = document.querySelector('#result > p');
 let scoreShow = document.getElementById('scoreShow');
 let isAnswered = false;
 let countdown = false;
 let seconds = 10;
 let timerId;
 let isPlaying;
 const interval = 100;

 const quizSet = [
   {q: '世界で一番大きな湖は？', c:['カスピ海', '黒海', '琵琶湖']},
 ];
 let currentNum = 0;
 let score = 0;

 function init(){
   isPlaying = false;
   btn.classList.add('startgreen');
   btn.classList.remove('disabled');
   btn.textContent = 'Quiz Start';
 }

 function checkAnswer(li) {
   if (li.textContent === quizSet[currentNum].c[0]){
     li.classList.add('correct');
     score++;
   } else {
     li.classList.add('wrong');
     score--;
   }
   btn.classList.remove('disabled');
   scoreShow.textContent = score;
 }



 function shuffle(arr){
   let i = arr.length - 1;
   for(i = arr.length -1; i > 0; i--){
     const j = Math.floor(Math.random() * (i + 1));
     [arr[j], arr[i]] = [arr[i], arr[j]];
   }
   return arr;
 }

function setQuiz(){
  isAnswered = false;
  question.textContent = quizSet[currentNum].q;

  while(choices.firstChild){
    choices.removeChild(choices.firstChild);
  }

  const shuffledChoices = shuffle([...quizSet[currentNum].c]);

  shuffledChoices.forEach(choice => {
    const li = document.createElement('li');
    li.textContent = choice;
    li.addEventListener('click', () => {
      if(!isPlaying){
        return;
      }
      if(isAnswered){
        return;
      }
      checkAnswer(li);
      isAnswered = true;
    });
    choices.appendChild(li);
  });

  if(currentNum === quizSet.length -1) {
    btn.textContent = 'Check Result!';
  }
}

function cDownStart(){
  countdown = true;
  timer.innerHTML = seconds;
  timerId = setTimeout(cDown, 1000);
}

function cDown(){
  seconds--;
  timer.innerHTML = seconds;
  if(seconds <= 0){
    clearTimeout();
    countdown = false;
    alert(`お疲れ様です。あなたのスコアは${score}点です。`);
  } else {
    setTimeout(cDown, 1000);
  }
}

init();

btn.addEventListener('click', () => {
  if(!isPlaying){
    cDownStart();
    setQuiz();
    btn.textContent = 'Next';
    btn.classList.remove('startgreen');
    btn.classList.add('disabled');
    isPlaying = true;
    return;
  }
  if(btn.classList.contains('disabled')) {
    return;
  }
  btn.classList.add('disabled');
  if(currentNum === quizSet.length -1){
    scoreLabel.textContent = `お疲れ様でした。あなたのスコアは${score}点です。`;
    result.classList.add('show');
  } else {
    currentNum++;
    setQuiz();
  }
});
}

行動規範の内容に同意します

回答2件

ベストアンサー

旧式の書き方ならこんな感じだろうか？

javascript
1 function hoge (e, text) {
2   const wait = 100;
3
4   e.textContent = '';
5   let ary = text.split ('');
6   
7   function fuga () {
8     e.textContent += ary.shift ();
9     if (ary.length)
10       setTimeout (fuga, wait);
11   };
12   
13   fuga ();
14 }
15
16--
17  question.textContent = quizSet[currentNum].q;
18  //上の行を下に修正
19  hoge (question, quizSet[currentNum].q);
20
21

以下蛇足です。

さて、ここで問題です。途中で動作を止めたくなったら？そして再開したり、最初から表示させたくなったらどうするか？またそれらを独立して複数配置したくなったらどうするか？

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="utf-8">
4<title></title>
5
6<body>
7  <ul>
8    <li>
9    <li>
10    <li>
11    <li>
12    <li>
13  </ul>
14
15    
16<script>
17
18{
19  class Hoge {
20
21    constructor (target, text = '', wait = 100) {
22      this.target = target;
23      this.text = text;
24      this.wait = wait;
25      this.timerId = null;
26      this.ary = [ ];
27
28      this.clear ();
29    }
30    
31    clear () {
32      this.target.textContent = '';
33      this.ary = this.text.split ('');
34      return this;
35    }
36    
37    start () {
38      if (! this.timerId) {
39        if (! this.ary.length)
40          this.clear ();
41        this.timerId = setInterval (loop.bind (this), this.wait);
42      }
43      return this;
44    }
45    
46    stop () {
47      if (this.timerId)
48        clearTimeout (this.timerId),
49        (this.timerId = null);
50      return this;
51    }
52    
53    toggle () {
54      this.timerId ? this.stop (): this.start ();
55      return this;
56    }
57    
58    handleEvent (event) {
59      if (event.target === this.target)
60        this.toggle ();
61    }
62    
63  }
64
65  //____________________
66
67  const loop = function () {
68    (this.ary.length)
69    ? this.target.textContent += this.ary.shift ()
70    : this.stop ();
71  }
72  
73  //____________________
74  
75  this.Hoge = Hoge;
76
77}
78
79//__________
80
81const str = 'この文字列をクリックすると一旦停止します。再開はもう一度クリックしてね';
82const li = document.querySelectorAll ('li');
83
84let cnt = 0;
85for (let e of li) {
86  let obj = new Hoge (e, str, ++cnt * 100);
87  document.addEventListener ('click', obj, false);
88  obj.clear ().start ();
89}
90
91</script>
92