3択クイズ、問題を読み込めるように改造しましょう。

（1-4）問題を読み込めるように改造しましょう。

メモ帳で開いて簡単に修正できるのは良いのですが、何個も何個もhtmlファイルを作るのは大変な事です。
そこで、問題はExcelなどで作成しておいて、それをペーストする事によって3択問題を走らせる事にしよう。
問題の部分を除いては他は共通なのだからそのような事は可能です。

まず、エクセルなどからペーストを受け付ける部分を作ります。

<textarea name="GetText" id="textarea1" cols="80" rows="10"></textarea>

これをhtmlファイルの<body> </body>の間の適当な所に貼り付けるとテキストエリアと呼ばれる領域が下記のように現れます。

cols="80" rows="10"と言うのは列が80文字、行が10行の大きさを示しています。
ただ、80文字と言うのがフォントによっても異なるので曲者ではあります。

ここに、エクセルからデータをペーストします。

練習用のこのテーブルをコピーしてエクセルにペーストしてみてください。６列11行のテーブルができれば成功です。そして、エクセルからテキストエリアにペーストします。

No	Question	Ans1	Ans2	Ans3	RA
0	水素の元素記号は？	Hg	H	Su	2
9	ヘリウムの元素記号は？	He	She	I	1
4	リチウムの元素記号は？	Li	Ri	Ly	1
3	ベリリウムの元素記号は？	Ve	Be	Bu	2
1	ホウ素の元素記号は？	Ho	Br	B	3
5	炭素の元素記号は？	Ca	C	Ta	2
7	窒素の元素記号は？	Ti	Ts	N	3
6	酸素の元素記号は？	Sa	Sm	O	3
8	フッ素の元素記号は？	Fu	F	Fe	2
2	ネオン元素記号は？	No	Nd	Ne	3

Question

Ans1

Ans2

Ans3

水素の元素記号は？

ヘリウムの元素記号は？

She

リチウムの元素記号は？

ベリリウムの元素記号は？

ホウ素の元素記号は？

炭素の元素記号は？

窒素の元素記号は？

酸素の元素記号は？

フッ素の元素記号は？

ネオン元素記号は？

Excelのテーブルをテキストエリアにペーストすると、セルとセルの間には見えませんけどtabが入っています。プログラムはこのtabで区切り位置を知るので、適当にスペースとかでデータを作るとちゃんと読み込めません。

そして次のようにすると、テキストエリアを読み込むボタンを作成する事ができます。

<input type="button" id="ReadBtn"  value="テキストエリアを読み込む" onclick="GetTextArea();">

このボタンをクリックすると、GetTextArea()と言う関数が実行されます。
関数というのは難しい言い回しです。

テキストエリアを読み込んで行と列を変数に代入する一連の動作を書いた命令の塊の事です。
次の形で定義します。

function GetTextArea(){

}

このページで、テキストエリアに問題をペーストして、読み込みボタンを押すと、下の質問がスタートします。（そしてテキストエリアとボタンは非表示になります。）

<html>
<head>
    <meta charset="utf-8" content="text/html; charset=utf-8">
    <title>3択クイズ</title>
</head>
<body>
    <textarea name="GetText" id="textarea1" cols="80" rows="10"></textarea><br>
    <input type="button" id="ReadBtn" value="テキストエリアを読み込む" onclick="GetTextArea();"><br>
    <br>
    <h1>曜日クイズ</h1>
    <hr>
    <h2>問題</h2>
    <div id="text_q"></div>
    <h2>選択  ~ <a href="javascript:nextQuize()"> 次の問題</a></h2>
    <div id="text_s">【 <a href="javascript:anser(1)"></a> 】【 <a href="javascript:anser(2)"></a> 】【 <a href="javascript:anser(3)"></a> 】</div>
    <h2>解答</h2>
    <h2><div id="text_a"></div></h2>
    <div class="container"></div>
    
    <script type="text/javascript">
//問題と解答
qa = new Array();
ansers = new Array(); //解答記録

//初期設定
var q_sel = 3; //選択肢の数
var Seikai=0;
var count = 0; //問題番号

const container =document.querySelector('.container');


setReady();

function GetTextArea(){
    var textAreaValue = document.getElementById("textarea1"); // htmlでID textareaの内容を取り出す。
    var MyTitle = 1;//１行目はタイトル行である

    var MyText = textAreaValue.value;//テキトエリアの内容を代入
    var MyLine;

    MyLine = MyText.split("\n");//テキトエリアの内容を改行コード\nで分割して、MyLine配列へ代入する。
    
    var lines = MyLine.length; //how many lines
    MyData = new Array(lines);// linesの数だけMyData[i]配列を作る。
    var BlankLine=0;
    for (var i = 0; i < lines; i++) {
        if(MyLine[i]==""){
            BlankLine++;
            continue;
        }
        MyData[i] = MyLine[i].split("\t");//MyLine[]をタブ区切り(カンマ）でMyData[i][j]に代入
    }
    lines=lines-BlankLine;
    for(var i=1;i<lines;i++){
        var qaX=parseInt(MyData[i][0]);//qa[x]
        qa[qaX]=new Array();
        qa[qaX][0]=MyData[i][1];//question
        qa[qaX][1]=MyData[i][2];//Ans1
        qa[qaX][2]=MyData[i][3];//Ans2
        qa[qaX][3]=MyData[i][4];//Ans3
        var rightAns=parseInt(MyData[i][5]);//right ans
        qa[qaX][4]=rightAns;
    }
    var MyItem = document.getElementById("textarea1");
     MyItem.style.visibility="hidden";
     var MyItem = document.getElementById("ReadBtn");
     MyItem.style.visibility="hidden";
    
    count = 0; //問題番号
    
    Seikai=0;
    //最初の問題
    quiz();
}

//初期設定
function setReady() {
    count = 0; //問題番号
    ansers = new Array(); //解答記録[]()
    Seikai=0;
    //最初の問題
    quiz();
}

//問題表示
function quiz() {
    var s, n;
    //問題
    document.getElementById("text_q").innerHTML = (count + 1) + "問目：" + qa[count][0];
    //選択肢
    s = "";
    for (n=1;n<=q_sel;n++) {
        if (qa[count][n] != "") {
            s += "【 <a href='javascript:anser(" + n + ")'>" +  qa[count][n] + "</a> 】";
        }
    }
    document.getElementById("text_s").innerHTML = s;
}

//解答表示
function anser(num) {
    var s;
    s = (count + 1) + "問目：";
    //答え合わせ
    if (num == qa[count][q_sel + 1]) {
        //正解
        ansers[count] = "あたり！ ";
        Seikai++;
    } else {
        ansers[count] = "はずれ！ 答えは　"+ qa[count][qa[count][4]];
    }
    s += ansers[count] ;
    
    document.getElementById("text_a").innerHTML = s;

}
    
    //次の問題を表示
function nextQuize(){
    document.getElementById("text_a").innerHTML = "";
    count++;
    if (count < qa.length) {
        quiz();
    } else {
        //終了
        s = "<table border='2'><caption>成績発表</caption>";
        //1行目
        s += "<tr><th>問題</th>";
        for (n=0;n<qa.length;n++) {
            s += "<th>" + (n+1) + "</th>";
        }
        s += "</tr>";
        //2行目
        s += "<tr><th>成績</th>";
        for (n=0;n<qa.length;n++) {
            s += "<td>" + ansers[n] + "</td>";
        }
        s += "</tr>";
        s += "</table>";
        document.getElementById("text_q").innerHTML = s;
        //次の選択肢
        
        s = "【<a href='javascript:setReady()'>同じ問題を最初から</a>】";
        
        document.getElementById("text_s").innerHTML = s;
        const img=new Image();
        if(Seikai<6){
            img.src="./images/ink.png";
            container.appendChild(img);
        }
        else if(Seikai>8){
            img.src="./images/Pafe.jpg";
            container.appendChild(img);
        }
    }
}
</script>
</body>
</html>

プログラミング・トップ > 化学,薬学系の親子で楽しみながらプログラミング > 第1回3択問題

（1-4）問題を読み込めるように改造しましょう。

3択問題

問題

選択 ~ 次の問題

解答

プログラミング・トップ > 化学,薬学系の親子で楽しみながらプログラミング