Javascript選択肢クイズ　クイズと選択肢　整合性

JSを駆使してクイズサイトを作っています。
選択肢と問題をランダムに出題したいと思っているのですが、以下のコードでは２つうまくいきません。
１つ目は、問題と解答がバラバラになってしまいます。考えてみたら、問題と質問が別々にシャッフルされた後にそれぞれ配置されてるのが理由かな、と思うのですが、どのように訂正できるでしょうか？
２つ目は、質問が被らないようにしたい（全て用意していた質問が終わったら、return或いはalertで「終わりました」と出したい）のですが、それもアドバイスをいただければと思います。

Javascriptのコード

'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');
 const test = document.getElementById('test');
 let scoreShow = document.getElementById('scoreShow');
 let isAnswered = false;
 let countdown = false;
 let seconds = 200;
 let timerId;
 let isPlaying;
 let intervalid;
 const interval = 100;

 const quizSet = [
   {q: 'Aは何？', c:['A', 'B', 'C', 'D']},
   {q: '1は何？', c:['1', '2', '3', '4']},
   {q: 'あは何？', c:['あ', 'い', 'う', 'え']}
 ];
 let currentNum = 0;
 let score = 3;
 let id;
 
//初期化処理
 function init(){
   alert('これはライフポイント制のクイズです。３ポイントから始まり、０ポイントになったら失格です。頑張ってください。');
   isPlaying = false;
   btn.classList.add('startgreen');
   btn.classList.remove('disabled');
   btn.textContent = 'Quiz Start';
 }

 init();

 //答えがあっているかを確認する関数
  function checkAnswer(li) {
    if (li.textContent === quizSet[currentNum].c[0]){
      li.classList.add('correct');
    } else {
      li.classList.add('wrong');
      score--;
    }
    btn.classList.remove('disabled');
    scoreShow.textContent = score;
    if(score === 0){
      alert('Game Over');
      clearTimeout(timerId);
    }
  }

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

  //問題や選択肢をシャッフルしてもらう
  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 typing(str = ""){
     let tmp = question.innerHTML;
     let writed = buf.length;
     let write = "";
     if(writed < str.length){
         write = str.charAt(writed);
     }
     question.innerHTML = tmp + write;
 }

 var timerArray = new Array();
 
  //クイズをセットする全般関数
  function setQuiz(){
   isAnswered = false;

   while (timerArray.length > 0) {
     clearInterval(timerArray.shift());
   }

    let temporary = shuffle(quizSet);
    let str = temporary[currentNum].q;
    question.innerHTML = "";
    let typeid = setInterval(function(){
      typing(str);
    }, 150); 
    timerArray.push(typeid);


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

   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 {
     timerId = setTimeout(cDown, 1000);
   }
 }

 //次へのボタンを押したら次に行く処理
 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();
   }
 });

HTMLのコード

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>Quiz</title>
 <link rel="stylesheet" href="css/styles2_rev.css">
</head>
<body>
  <div class="container">
    <p id="timer" class="margin"></p>
    <p id="scoreShow" class="margin"></p>
    <br>
    <p id="question"></p>
    <ul id="choices">
    </ul>
    <div id="btn" class="disabled">Next</div>
    <dev id="test"></dev>

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

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

CSのコード

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;
}

.margin {
  margin-bottom: 10px;
}

#timer.danger {
  color: red;
}