Javascript Quiz 三択　ランダム表示

2018年9月24日月曜日

Javascript Quiz 三択　ランダム表示

<body>
◆ Array 全体 
<ul id="wholeArray">
</ul>
◆ 配列の値を１つずつ取り出す 
<ul id="elementArray">
</ul>
span id で表示 
<li> 1. </li>
<li> 2. </li>
<li> 3. </li>
<li> 4. </li>
<script type="text/javascript">
var shuffle = [1,2,3,4,5,6,7,8,9,10];

　function run(){
　　　document.getElementById("10000").innerHTML = "for文外での配列再表示(1) " + shuffle;
　　　　for (var i = shuffle.length-1 ; i >=0 ; i--){
var rand = Math.floor(Math.random()*(i+1));
var temp = shuffle[i];
shuffle[i] = shuffle[rand]; //シャッフル処理
shuffle[rand] = temp;
//wholeArrayへの追加
const wholeArray = document.getElementById("wholeArray");
var liNode1 = document.createElement("li");

var textNode1 = document.createTextNode("カウント変数 i が"+i+"の時" + shuffle);
wholeArray.appendChild(liNode1).appendChild(textNode1);

//ElementArrayへの追加
const elementArray = document.getElementById("elementArray");
var liNode2 = document.createElement("li"); //2度指定する必要なし?。

var textNode2 = document.createTextNode("カウント変数 i が"+ i +"の時の配列要素[i]は " + shuffle[i]);

elementArray.appendChild(liNode2).appendChild(textNode2);

document.getElementById("8000").innerHTML = "for文外での配列再表示(3) " + shuffle;
qa = new Array();
　　　　　　　 qa[0] = ["イルカを漢字で書くとどれ？","海豚","海牛","河豚",1];
qa[1] = ["クラゲを漢字で書くとどれ？","水浮","水母","水星",2];
qa[2] = ["カタツムリを漢字で書くとどれ？","禍牛","鍋牛","蝸牛",3];
qa[3] = ["バッタを漢字で書くとどれ？","飛蝗","飛蟻","飛脚",1];
qa[4] = ["タツノオトシゴを英語にするとどれ？","sea fish","sea horse","sea dragon",2];
qa[5] = ["マグロを英語にするとどれ？","funa","suna","tuna",3];
qa[6] = ["トンボを英語にするとどれ？","fly","dragonfly","butterfly",2];
qa[7] = ["ヒトデを英語にするとどれ？","starfish","starshell","starmine",1];
qa[8] = ["恒星の中で最も明るい星は？","デネブ","スピカ","シリウス",3];
qa[9] = ["惑星の中で最も重たいのはどれ？","太陽","木星","天王星",2];

　　　　　　　var cnt = i;
var orderArray = shuffle[cnt];

document.getElementById(7000).innerHTML = "qa[i-1] is " + qa[orderArray];
}
}
run();
</script>

</body>

プログラムを独学する時のメモページ

☆☆ 新着記事 ☆☆

2018年9月24日月曜日