にしのクエスト２

情報処理技術者試験と資格学校講師の日常

20240615101703

トップ > JavaScriptで過去問 > JavaScriptで過去問演習サイトを作る　その２（不定期）

JavaScriptで過去問演習サイトを作る　その２（不定期）

JavaScriptで過去問

JavaScriptで過去問できるサイトを作ってみようという不
定期で不届な連載です。怒られたらやめるｗ

----
さて、作者のにしのです。ここの過去問の解説、いいんだ
けど某過去問道場さんに比べるとやりにくいというか、演
習しにくいんですよね。

わかってましたよ。わかってます。

というわけで、「はてなブログ」でJava Scriptを利用しつ
つ過去問の演習サイトみたいなのを作ってみようじゃない
かというテーマで不定期に連載していきます。

Pythonは習う機会が多いと思うんですが、JavaScriptは
今も多くの場面で使われている利用価値の高い言語でござ
います。

一緒にその世界に触れていけたらと思っています。

（３）テキストを変数で用意する

スクリプトを書いていくついでに、データを作っていきます

今回は１問目を表示するようにしてみましょう。

-------------------------


サンプルはこちらです
４択クイズのサンプルです - にしのクエスト２

----------------------

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="Shift-JIS">
<title>４択クイズ</title>
</head>
<body>
<div id="txt0"></div>
<div id="txt1"></div>
<input type="button" value="ã‚¢" id="btn1"><div id="txt2"></div><br>
<input type="button" value="イ" id="btn2" ><div id="txt3"></div><br>
<input type="button" value="ウ" id="btn3"><div id="txt4"></div><br>
<input type="button" value="エ" id="btn4"><div id="txt5"></div><br>
<div id="txt6"></div><br>
<input type="button" id="txt6" id="btn5" disabled="true" value="次の問題へ"><br>
</body>
 
<script type="text/javascript">
//問題番号
let num={val:0}
//問題の配列
const Question = [
{"q1":"北海道の県庁所在地は？","a1":"札幌","a2":"福島","a3":"前橋","a4":"秋田"}
];
//テキストについたＩＤを拾う
document.getElementById("txt0").innerHTML=Question[num.val].q1;
document.getElementById("txt1").innerHTML=Question[num.val].a1;
document.getElementById("txt2").innerHTML=Question[num.val].a2;
document.getElementById("txt3").innerHTML=Question[num.val].a3;
document.getElementById("txt4").innerHTML=Question[num.val].a4;
 
</script>
</html>


---------------------

次回に続きます。