| ホームページ | Pirikaで化学 | ブログ | 業務案内 | お問い合わせ |
| 情報化学+教育トップ | 情報化学 | MAGICIAN | MOOC | プログラミング |
2022.2.19
Pirika.comでプログラミング
山本博志
まず、次のプログラムで遊んでみましょう。
オリジナルはこちらのものです。
これは、化学、薬学は全く関係無いですが、曜日の英語スペルで正しいものを選ぶクイズです。
問題に対して正しいと思う3つのうちのどれかをクリックします。
解答が表示された後、次の問題をクリックします。全部終了すると評価が表示されます。
このようなプログラムは簡単に作る事ができます。
こうした事ができるなら、算数の計算問題だとか、歴史の年号だとか応用範囲は広いでしょう。
お子さんと、いろいろなクイズを作って楽しく勉強をして、ついでにプログラミングの技術も身につけましょう。
必要なものは、コンピュータ、ブラウザーとメモ帳などのテキスト・エディターだけです。
まず最初に次の▶︎をクリックして開いて、<!DOCTYPE html>から</html>の間を全部コピーしてメモ帳（マックならテキストエディット）などテキスト・エディターに貼り付けます。
そして、PCのハードディスクの書類フォルダの中に、MyHtmlというフォルダーを作り、その中に、No1-1.htmlと言う名前でセーブします。
早くも（特にMacユーザーが）うまく動かないと連絡がありました。
階層型ファイルシステムが理解できていないとファイルを配置させる部分でつまずいてしまいます。
詳しい説明をつけましたので、こちらを読んで見てください。
完成形プログラム（▶︎をクリックして開く）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>3択クイズ</title>
</head>
<body>
<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] = ["日曜日は英語で？","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];
//初期設定
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>
このhtmlと言うのは、ハイパー・テキスト・マークアップ・ランゲージと言うブラウザーが理解できる言語です。
基本的にはマシンやブラウザーの種類を問わないので、一度作成したものは何処でも動作します。
No1-1.htmlがセーブできたら、マウスでダブルクリックしてみましょう。普段使っているブラウザーが開かれ、３択問題が表示されたら成功です。
ブラウザーはホームページを表示するだけでなく、プログラムを動かすことができる。
プログラムはテキスト（文章）の塊でできていて、テキストエディターにコピペできる。
そのテキストの塊をハードディスクに保存することができる。
保存されたファイルをダブルクリックすると、ブラウザーが開きプログラムが走る。
もし、用語の理解が怪しいようでしたら、こちらを参照してください。
・プログラム（コンピュータに行わせる指令）
・ハードディスクに保存
・ディレクトリー、フォルダー
・階層型ファイルシステム
・拡張子(html)はアプリとファイルを結びつける。
Copyright pirika.com since 1999-
Mail: yamahiroXpirika.com (Xを@に置き換えてください) メールの件名は[pirika]で始めてください。