質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.77%

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

受付中

回答 2

投稿

  • 評価
  • クリップ 3
  • VIEW 615

Asylum35aO2

score 17

以下のようなクイズを作っています。今何問目?という問題を出したいのですが、配列からランダムに出題されるような設計にしているため、今何問目?の選択肢を最初から入れるわけには行きません。
次の問題に移るための番号をcurrentNum(最初は=0)で管理しているため、それを用いて
{q: '今何問目?', c:[${currentNum}問目${currentNum - 1}問目${currentNum + 1}問目${currentNum + 2}問目]},とすると行けるかな?と思いつつ、試してみましたが失敗。(`を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:['そこまでコードを伸ばさないといけない', 'もうすぐコードが終わる', 'コードを伸ばしてからおおよそ10mの場所', '常に黄色が見えない位置を保って使う必要がある']},
   {q: '肉まんの下などによく敷かれているのを目にする透明の紙の名前は何でしょう?', c:['グラシン紙', 'アレビン紙', 'モーズレイ紙', 'コロイド紙']},
   {q: '地殻変動で誕生した山としては太陽系の中で最も高いと言われる木星の衛星イオに存在する山の名前は何でしょう?', c:['ボオサウレ山', 'アスクレウス山', 'オリンポス山', 'エリシウム山']},
   {q: 'ホワイトアスパラガスは、栄養分が芽の先に多く含まれていることから、フランスでは何と呼ばれている?', c:['マドモアゼルの指', 'マリーアントワネットの指', 'クレオパトラの指', 'ジャンヌダルクの指']},
   {q: '動物園で、動物を順番に数えました。そして、17番目の動物は、ひっくり返ってそのまま起き上がりません。この動物はなんでしょう?', c:['ライオン', 'シマウマ', 'カバ', 'ワニ']},
   {q: '物理学の用語で日本語では「分子間力」という分子と分子との間に働く弱い引力を、それを発見したオランダの科学者の名前を取って何という?', c:['ファンデルワールス力', 'ライスナー・ノルドシュトル力', 'ビオサバール力', 'ファラッド力']},
   {q: '今何問目?', c:[`${currentNum}問目`, `${currentNum - 1}問目`, `${currentNum + 1}問目`, `${currentNum + 2}問目`]},
   {q: '母の日にあげる事で一般的なカーネーションですが、黄色のカーネーションが持つ花言葉は次のうちどれ?', c:['軽蔑', '嫉妬', '絶望', '慟哭']},
   {q: 'ナメクジにかけてしまうとナメクジ自体が溶けてしまうと言われている物質の中で有名なのは塩ですが、もう1つは何?', 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();
   }
 });
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2019/04/22 03:42

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

    キャンセル

  • Asylum35aO2

    2019/04/22 04:59

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2019/04/22 06:28

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

    キャンセル

回答 2

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/23 04:24

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

    キャンセル

0

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る