データの中身をランダムで表示させたい

Question

前提・実現したいこと

jsで4択のクイズを表示させるものを作りたいです。
乗せたコードではだいぶカットしてありますが、quizDataの中身を順番に表示させることはできたのですが、データの中身をランダムで表示させたいと思っております。
色々調べたのですが、var a = Math.floor( Math.random() * 4 )　を使おうと思ったのですが、うまく使いこなせません。

どうすればランダム表示させることができるでしょうか？

コード

var quizData = [
	{"question": "1+1", "choices": ["1", "2", "3", "4"], "correct": "2"},
	{"question": "2+2", "choices": ["2", "3", "4", "5"], "correct": "4"},
	{"question": "3+3", "choices": ["3", "4", "5", "6"], "correct": "6"},
	{"question": "4+4", "choices": ["4", "5", "6", "8"], "correct": "8"}
]

//質問作成
	const createQst = () => {
		let choices = quizData[turn].choices; // 今の順番の質問の配列を作る
		let choicesHtml = ""; // ここに格HTMLのラジオボタンを⼊れる

	// クイズ選択のラジオボタンを作る
		for (let i = 0; i < choices.length; i++) { // 格配列の値に対して、HTMLのラジオボタンを作る。インデックスに対した値を⼊れる。
			choicesHtml += "<input type='radio' name='quiz" + turn + "' id='choice" + (i + 1) + "' value='" + choices[i] + "'>" + " <label for='choice" + (i + 1) + "'>" + choices[i] + "</label><br>";
		}

	// HTMLに質問を⼊れる
		question.textContent = "No." + (turn + 1) + " " + quizData[turn].question;

	// 上で作ったラジオボタンをHTMLに⼊れる
		choice.innerHTML = choicesHtml;

	// ⼀番⽬の質問のボタン名を作る
		if (turn === 0) {
			submit.textContent = "Submit";
		}
	}

Answer 1

quizDataの中身を順番に表示させることはできたのですが、
データの中身をランダムで表示させたいと思っております

質問者さんが、今できたことと、次にやりたいことの違いは、**「順番」と「ランダム」**ですよね。
なら、方針としては、「順番」を示す変数を、ランダムな値に交換すればいいわけです。

具体的には、「quizData[turn]」の「turn」を、取得した乱数を格納した変数にすると。

また、カット前のソースの分量は分かりませんが、もし何かの理由で引っかかっているなら、
テスト用の別の小さいプログラムの中で、乱数を取得する実験をすればいい訳です。

「現状と実装したいこととの差分を考える」とか「新しいことは箱庭で実験する」とか、
これらは、また別の実装にしたい時（たとえば、点数で分岐するとか）、
もっと困難なバグに遭遇した時、役立つ考え方だと思います。

バグとの遭遇確率が上がるのは、自分で自分のコードを把握できてない時です。
よって、なるべくグローバル変数を使わずスコープを小さくするのと同じで、
差分を取ったり、テストコードとかで、自分が見る範囲を縮めるのが有効です。

Answer 2

適当なソート

var quizData = [
    {"question": "1+1", "choices": ["1", "2", "3", "4"], "correct": "2"},
    {"question": "2+2", "choices": ["2", "3", "4", "5"], "correct": "4"},
    {"question": "3+3", "choices": ["3", "4", "5", "6"], "correct": "6"},
    {"question": "4+4", "choices": ["4", "5", "6", "8"], "correct": "8"}
]
quizData.forEach(x=>x.choices=x.choices.map(x=>[x,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]));
console.log(quizData);

Comments

[umi3]

すみません、回答をランダムで表示するのではなく、問題自体をランダムで表示させたいです…

Answer 3

ランダムにクイズデータを取得するには例えば以下のように記述すれば取得できるかと思います。

let randomIndex = Math.floor( Math.random() * 4 );

const randomQuizData = quizData[randomIndex];

Comments

[umi3]

やってみたのですが、[object object ]となってしまって、stringsを使ったりして色々やってみたのですがうまく出来ません

対処法とか教えていただけると嬉しいです。