クイズ ランダム配列 今何問目？

Question

以下のようなクイズを作っています。今何問目？という問題を出したいのですが、配列からランダムに出題されるような設計にしているため、今何問目？の選択肢を最初から入れるわけには行きません。
次の問題に移るための番号をcurrentNum(最初は＝０）で管理しているため、それを用いて
{q: '今何問目？', c:[${currentNum}問目, ${currentNum - 1}問目, ${currentNum + 1}問目, ${currentNum + 2}問目]},とすると行けるかな？と思いつつ、試してみましたが失敗。(`を２つ用いて囲む、というのが配列の中では多分ダメなのかな)
以下はJSのファイルのみですが、何かアドバイスいただけると幸いです。

 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: '本来は「権力に屈しない新聞記者」を指した言葉で大会での優勝はないが実力を持つ選手などを何という？', c:['無冠の帝王', '反骨精神', '絶対王者', '天下無双']},
   {q: '日本最大のトンボはオニヤンマですが体長およそ1.5センチと日本最小のトンボは何でしょう？', c:['ハッチョウトンボ', 'ギンヤンマ', 'ヒメクロサナエ', 'ヒメアカネ']},
   {q: '一般に市販されている掃除機のコードに付いている黄色の印が表す意味は何でしょう？', c:['そこまでコードを伸ばさないといけない', 'もうすぐコードが終わる', 'コードを伸ばしてからおおよそ１０mの場所', '常に黄色が見えない位置を保って使う必要がある']},
   {q: '肉まんの下などによく敷かれているのを目にする透明の紙の名前は何でしょう？', c:['グラシン紙', 'アレビン紙', 'モーズレイ紙', 'コロイド紙']},
   {q: '地殻変動で誕生した山としては太陽系の中で最も高いと言われる木星の衛星イオに存在する山の名前は何でしょう?', c:['ボオサウレ山', 'アスクレウス山', 'オリンポス山', 'エリシウム山']},
   {q: 'ホワイトアスパラガスは、栄養分が芽の先に多く含まれていることから、フランスでは何と呼ばれている?', c:['マドモアゼルの指', 'マリーアントワネットの指', 'クレオパトラの指', 'ジャンヌダルクの指']},
   {q: '動物園で、動物を順番に数えました。そして、１７番目の動物は、ひっくり返ってそのまま起き上がりません。この動物はなんでしょう？', c:['ライオン', 'シマウマ', 'カバ', 'ワニ']},
   {q: '物理学の用語で日本語では「分子間力」という分子と分子との間に働く弱い引力を、それを発見したオランダの科学者の名前を取って何という？', c:['ファンデルワールス力', 'ライスナー・ノルドシュトル力', 'ビオサバール力', 'ファラッド力']},
   {q: '今何問目？', c:[`${currentNum}問目`, `${currentNum - 1}問目`, `${currentNum + 1}問目`, `${currentNum + 2}問目`]},
   {q: '母の日にあげる事で一般的なカーネーションですが、黄色のカーネーションが持つ花言葉は次のうちどれ？', c:['軽蔑', '嫉妬', '絶望', '慟哭']},
   {q: 'ナメクジにかけてしまうとナメクジ自体が溶けてしまうと言われている物質の中で有名なのは塩ですが、もう１つは何？', c:['砂糖', '酢', 'レモン果汁', 'わさび']},
   {q: '南米の国ベネズエラで見られる自然現象で、稲光だけが大量に観測される事を何の雷という？', c:['カタトゥンボの雷', 'オルデンの雷', 'アンテアイヤーの雷', 'ディアレアの雷']},
   {q: '世界の国旗で中央に「スカンデルベクの鷲」という紋章が描かれているヨーロッパの国は？', c:['アルバニア', 'ルーマニア', 'スロバキア', 'スロベニア']},
   {q: 'ギネスブック作成者がギネスブックを作成するきっかけにもなったと言われている疑問は何？', c:['ヨーロッパで一番速く飛ぶ鳥は何か？', '蛇は何匹のネズミを一度に口に含めるのか？', 'アフリカの中で一番噛む力が強い動物は何か？', '世の中でもっとも強い毒を持つ生き物は何か？']},
   {q: '1428年 後継者が決まる前に先代が亡くなったため、くじ引きで将軍に選ばれた室町幕府6代将軍は誰？', c:['足利義政', '足利義教', '足利義輝', '足利義晴']},
   {q: '「哺乳類のX染色体がDNA量および遺伝子に関して種を超えて保存されている」という1967年に「大野の法則」を提唱した生物学者は誰でしょう？', 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';
 }

  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('ざまあみろ（笑）');
      clearTimeout(timerId);
      clearInterval(timerArray.shift());
      result.classList.add('show');
    }
  }


  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 buf = question.innerHTML;
     let writed = buf.length;
     let write = "";
     if(writed < str.length){
         write = str.charAt(writed);
     }
 }

 var timerArray = new Array();
 const shuffled = shuffle(quizSet);
 const shuffledQuestion = shuffled[currentNum].q;

 function setQuiz(){
   isAnswered = false;

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

   let n = 1;
   let id = setInterval(function(){
     question.innerHTML = quizSet[currentNum].q.substring(0, n);
     if(n<quizSet[currentNum].q.length){
       n++;
     } else {
       clearInterval(id);
     }
   }, 200);
 
  for(let qNumber = 0; qNumber < quizSet.length; qNumber++){
    let str = shuffle(quizSet).q;
    question.innerHTML = "";
    let typeid = setInterval(function(){
      typing(str);
    }, 150); 
    timerArray.push(typeid);
  }
  

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

   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 {
     timerId = 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 = `お疲れ様でした。`;
     result.classList.add('show');
   } else {
     currentNum++;
     setQuiz();
   }
 });

Comments

[退会済みユーザー]

const quizSet= ... の前に、 let currentNum = 0;　を置けば解決

[Asylum35aO2]

ありがとうございました。前に置かないとダメなのですね。
今やってみましたが、何問目に来ても、今何問目？の答えが０になってしまうのは、currentNumの増加が反映されていないということなのでしょうか。

[退会済みユーザー]

定義したときの値だからね。

Answer 1

今何問目をQXとすると
quizSetをQX抜きでつくっておいてシャッフルし、
QX用にランダム値rを抽出し、quizSet配列のr番目の質問とQXを入れ替える

Comments

[Asylum35aO2]

ありがとうございます。慣れてない身からしたら少し難しいですね。少し考える時間が必要そうです。

Answer 2

quizSetを変えてもいいのであれば

let quiz_count = 0;
const quizSet = [
"問題1",
"問題2"
  ・
  ・
  ・
];

const quiz = () => {
    return quizSet[Math.floor(Math.random() * 6/*←何問あるかによって変える*/)];
}

const quiz_start = () => {
    quiz_count++;
    let quiz_databoard = document.getElementById('/*ここに問題数を表示する要素のid*/')
    let quiz_board = document.getElementById('/*ここに問題を表示する要素のid*/')
    quiz_board.textContent = "問題数:" + quiz_count;
    quiz_board.textContent = quizSet;
}

分からないところは答えます