| ホームページ | Pirikaで化学 | ブログ | 業務案内 | お問い合わせ |
| 情報化学+教育トップ | 情報化学 | MAGICIAN | MOOC | プログラミング |
2022.2.19
Pirika.comでプログラミング
山本博志
前回、曜日の英語当てクイズをNo1-1.htmlという名前でファイルを作ってみました。
早速、問題を変更してみましょう。
No1-1.htmlを複製して、No1-1b.htmlと言う名前にしてメモ帳で開いてみましょう。（No1-1b.htmlをダブルクリックしてしまうとブラウザーで開いてしまいます。マウスで右クリックしてアプリを選択します。もしくは、アプリの側から「開く」で選択します。）
（注）
メモ帳にコピぺした後、ファイルに保存（セーブ）するやり方がそもそもわからん…人は
最近のスマホ・ユーザーからPC/Macへ拡張した人は、セーブという概念が余りありません。「0-0プログラム以前の基礎。黒電話の取説」を参考にしてください。
算数の計算問題でも、歴史の年号でも良いのですが、元素の元素記号を答える問題を作ってみましょう。
メモ帳をスクロールしていくと次のような部分があるはずです。
//問題と解答
qa = new Array();
qa[0] = ["日曜日は英語で？","Sanday","Sunday","Sundei",2];
qa[1] = ["水曜日は英語で？","Wednesday","Wenesuday","Wenesday",1];
qa[2] = ["金曜日は英語で？","Friday","Fliday","Freiday",1];
qa[3] = ["火曜日は英語で？","Twesday","Tuesday","Tuezday",2];
qa[4] = ["土曜日は英語で？","Sataday","Satuday","Saturday",3];
qa[5] = ["月曜日は英語で？","Manday","Monday","Moneday",2];
qa[6] = ["木曜日は英語で？","Thasday","Tusday","Thursday",3];このqaというのは配列変数というものです。
プログラムでは、プログラム中で使いたい値などを変数という入れ物に入れておきます。
変数というのは「変わる数の入れ物」だと思ってください。
配列変数というのは、おでん鍋のような変数のことです。
qa[0][0]="日曜日は英語で？"
qa[0][1]="Sanday"
qa[0][2]="Sunday"
qa[0][3]="Sundei"
qa[0][4]=2
と代入されています。
最後のqa[0][4]だけ値は数字で、他は文字列です。
ここの問題と解答を好きなものに変更していきます。
元々は曜日のクイズなので、質問は7つあります。コンピュータは数字はゼロから数えるので、0-6までの７つの質問と答えをセットで作ります。
１つの行、qa[X]=[]が1つの質問と答えのセットになります。(qaの部分は数字も含めて全部半角である必要があります。)
本当は配列とか文字列、数値とかを学ばなくてはならないのですが、習うより慣れろで作っていきましょう。
次の行をみてみてください。
qa[0] = ["日曜日は英語で？","Sanday","Sunday","Sundei",2];問題と答えは、次のような形になっています。
qa[0] = ["問題","３択その１","３択その２","３択その３",正解の番号（半角の数字）];文字の部分は"で囲まれ、質問と答えの候補が３つがあり、そして正解の半角番号になっています。そして、それらは半角カンマ(,)で区切られています。
//問題と解答
qa = new Array();
qa[0] = ["水素の元素記号は？","Hg","H","He",2];
qa[1] = ["ヘリウムの元素記号は？","He","She","I",1];
qa[2] = ["リチウムの元素記号は？","Li","Ri","Ly",1];
qa[3] = ["ベリリウムの元素記号は？","Ve","Be","Bu",2];
qa[4] = ["ホウ素の元素記号は？","Ho","Br","B",3];
qa[5] = ["炭素の元素記号は？","Ca","C","Ta",2];
qa[6] = ["窒素の元素記号は？","Ti","Ts","N",3];
qa[7] = ["酸素の元素記号は？","Sa","Sm","O",3];
qa[8] = ["フッ素の元素記号は？","Fu","F","Fe",2];
qa[9] = ["ネオン元素記号は？","No","Nd","Ne",3];
質問を３つ増やし、7-9まで、例えば上のように作ります。
元素記号でなく、重さであるとか、電子配置とかでも何でも良いので作ってみましょう。
さー、これで化学系３択問題第一号が出来上がりました。でも、これだと、出てくる順番がいつも同じになってしまいます。そこで、次のようにqa[x]のxの部分の半角数字を適当に入れ替えてみましょう。
//問題と解答
qa = new Array();
qa[0] = ["水素の元素記号は？","Hg","H","He",2];
qa[9] = ["ヘリウムの元素記号は？","He","She","I",1];
qa[4] = ["リチウムの元素記号は？","Li","Ri","Ly",1];
qa[3] = ["ベリリウムの元素記号は？","Ve","Be","Bu",2];
qa[1] = ["ホウ素の元素記号は？","Ho","Br","B",3];
qa[5] = ["炭素の元素記号は？","Ca","C","Ta",2];
qa[7] = ["窒素の元素記号は？","Ti","Ts","N",3];
qa[6] = ["酸素の元素記号は？","Sa","Sm","O",3];
qa[8] = ["フッ素の元素記号は？","Fu","F","Fe",2];
qa[2] = ["ネオン元素記号は？","No","Nd","Ne",3];
0から順番に出題されるので、少し難しくなります。
//問題表示
function quiz() {
var s, n;
//問題
document.getElementById("text_q").innerHTML = (count + 1) + "問目：" + qa[count][0];
//選択肢
プログラムは上の様になっています。
countが0の時、１問目として、qa[0][0]が表示されるので、"水素の元素記号は？"になります。
countが１の時、２問目として、qa[1][0]が表示されるので、"ホウ素の元素記号は？"が出題されます。
乱数とかを使うやり方は、また先で学びましょう。
変更したものはちゃんと動きましたか？
ダメだったら、次の完成形と比べてみましょう。どこか違いがないか見てみましょう。
必要であれば、コピペしてNo1-2.htmlとセーブしておきましょう
完成形プログラム（▶︎をクリックして開く）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>化学3択クイズ</title>
</head>
<body>
<h1></h1>
<h1>元素記号クイズ</h1>
<hr>
<h2>問題</h2>
<div id="text_q"></div>
<h2>選択 </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>
<h2> <a href="javascript:nextQuize()"> 次の問題</a></h2>
<script type="text/javascript">
//問題と解答
qa = new Array();
qa[0] = ["水素の元素記号は？","Hg","H","He",2];
qa[9] = ["ヘリウムの元素記号は？","He","She","I",1];
qa[4] = ["リチウムの元素記号は？","Li","Ri","Ly",1];
qa[3] = ["ベリリウムの元素記号は？","Ve","Be","Bu",2];
qa[1] = ["ホウ素の元素記号は？","Ho","Br","B",3];
qa[5] = ["炭素の元素記号は？","Ca","C","Ta",2];
qa[7] = ["窒素の元素記号は？","Ti","Ts","N",3];
qa[6] = ["酸素の元素記号は？","Sa","Sm","O",3];
qa[8] = ["フッ素の元素記号は？","Fu","F","Fe",2];
qa[2] = ["ネオン元素記号は？","No","Nd","Ne",3];
//初期設定
q_sel = 3; //選択肢の数
var Seikai=0;
const container =document.querySelector('.container');
setReady();
//初期設定
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;
}
}
</script>
</body>
</html>問題は変数の中に入っている。
文字の変数は""で囲む。
変数の入れ物の名前はどう決めてもいい。
でも、シリーズとして一連の変数で扱いたい時には配列変数を使うと便利になる。
プログラムの中には、単なる説明、コメントとして実行させない部分を入れることができる。
//ならそれ以降の1行
/* */ で囲まれた間全部
がコメント行になります。
もし、用語の理解が怪しいようでしたら、こちらを参照してください。
Copyright pirika.com since 1999-
Mail: yamahiroXpirika.com (Xを@に置き換えてください) メールの件名は[pirika]で始めてください。