<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="CPM-program">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DotGothic16&family=Noto+Sans+JP&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Corben:700" rel="stylesheet">
<link rel="shortcut icon" href="../img/hataraku.png">
<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<title>CPM-program</title>
<style>
main{
margin-left: 100px;
margin-right: 100px;
margin-top: 50px;
margin-bottom: 50px;
height: 100vh;
}
</style>
</head>
<body>
<main>
<h1 class="page-title">Rubyクイズ①</h1>
<button id="startButton">クイズ開始</button>
<button id="finishButton" onclick="finishQuiz()">クイズ終了</button>
<div id="timer-container">
<!-- 時間を表示する要素 -->
<p id="timer">00:00</p>
</div>
<div class="blackboard-box">
<div class="quiz-text question" id="text_q"></div>
<div class="chalk1"></div>
<div class="chalk2"></div>
</div>
<div class="select-area">
<h2 class="quiz-title">1~3のどれかをクリックしてね</h2>
<div class="quiz-text select" id="text_s"></div>
</div>
<div class="answer-area">
<h2 class="quiz-title">さっきの答えは</h2>
<div class="quiz-text" id="text_a"></div>
</div>
</main>
<footer id="footer">
<small>© 2022 プチ論研究-伊藤理乃</small>
</footer>
<script>
// クイズの開始時間
var startTime;
// タイマーID
var timerId;
// イベントリスナーを追加
document.getElementById('startButton').addEventListener('click', startQuiz);
document.getElementById('finishButton').addEventListener('click', finishQuiz);
// クイズが始まると呼び出される関数
function startQuiz() {
// 開始時間を取得
startTime = new Date();
// タイマーをスタート
updateTimer();
}
// タイマーを更新する関数
function updateTimer() {
// 現在の時間を取得
var currentTime = new Date();
// 開始からの経過時間（ミリ秒）を計算
var elapsedTime = currentTime - startTime;
// ミリ秒を分と秒に変換
var minutes = Math.floor(elapsedTime / (1000 * 60));
var seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000);
// タイマーを更新
var timerElement = document.getElementById('timer');
timerElement.textContent = pad(minutes) + ':' + pad(seconds);
// 1秒ごとに再帰的に呼び出す
timerId = setTimeout(updateTimer, 1000);
}
// 数字が1桁の場合に0を付ける関数
function pad(num) {
return (num < 10 ? '0' : '') + num;
}
// クイズを終了する関数
function finishQuiz() {
// タイマーを停止
clearTimeout(timerId);
// ここにクイズ終了時の追加処理を追加
// たとえば、スコアの計算や結果の表示など
}
//初期設定
q_sel = 3; //選択肢の数
q_max = 3; //出題数
setReady();
//初期設定
function setReady() {
count = 0; //問題番号
ansers = new Array(); //解答記録
seikai = 0; // ++++++
//問題と解答
qa = new Array();
qa[0] = ["print()の処理方法は？","()内の文字列を出力できる","()内の文字列を出力して、最後に改行が追加される","キーボードで打ち込んだ文字を取り出す",1];
qa[1] = ["getsの処理方法は？","キーボードで打ち込んだ文字を取り出す","コメント文にする","対応する値を整数の文字列に置き換える",1];
qa[2] = ["％d、％f、％sが使える出力形式は？","print","gets","printf",3];
qa[3] = ["対応する値を文字列に置き換えるのはどれ？","％d","％s","％f",2];
qa[4] = ["「#」を使った時はどのように処理が行われる？","改行される","掛け算される","コメントアウトされる",3];
qa[5] = ["プログラムの一部を実行させなかったり、同じ処理を何回も繰り返したりすることができるものは？","制御構造","破壊的操作","乱数",1];
qa[6] = ["redoの処理内容は？","処理を中止して、ループを終わらせる","条件を判断せず、処理を最初からやり直す","処理をスキップして、次のループに移る",2];
qa[7] = ["forの処理方法は？","配列や範囲などの複数の間を順に変数に代入する","配列の要素を小さい順に並べ替えた結果を返す","配列の末尾に要素を追加する",1];
qa[8] = ["変数とは何か？","値につける名前","複数の値をひとまとめにできるもの","数字の中からランダムに発生させる数",1];
qa[9] = ["Time.now を使うと何ができる？","一時停止できる","配列の要素を小さい順に並べ替えれる","現在の時刻を受け取ることができる",3];
//最初の問題
quiz();
}
//問題表示
function quiz() {
var s, n;
//問題
md = Math.floor(Math.random() * qa.length); //乱数
document.getElementById("text_q").innerHTML = (count + 1) + "問目：" + qa[md][0];
//選択肢
s = "";
for (n=1;n<=q_sel;n++) {
if (qa[md][n] != "") {
s += "【<a href='javascript:anser(" + n + ")'>" + n + "：" + qa[md][n] + "</a>】";
}
}
document.getElementById("text_s").innerHTML = s;
// qa.splice(md,1); // ------------------
}
//解答表示
function anser(num) {
var s;
s = (count + 1) + "問目：";
//答え合わせ
if (num == qa[md][q_sel + 1]) {
//正解
ansers[count] = "○";
seikai ++; // ++++++
} else {
ansers[count] = "×";
}
s += ansers[count] + qa[md][num];
document.getElementById("text_a").innerHTML = s;
qa.splice(md,1); console.log(qa); // ++++++++++
//次の問題を表示
count++;
if (count < q_max) {
quiz();
} else {
//終了
s = "<table border='2'><caption>成績発表</caption>";
//1行目
s += "<tr><th>問題</th>";
for (n=0;n<q_max;n++) {
s += "<th>" + (n+1) + "</th>";
}
s += "</tr>";
//2行目
s += "<tr><th>成績</th>";
for (n=0;n<q_max;n++) {
s += "<td>" + ansers[n] + "</td>";
}
s += "</tr>";
s += "</table>";
s += "<br>成績は、" + seikai + "点です"; // +++++++
document.getElementById("text_q").innerHTML = s;
//次の選択肢
s = "【<a href='javascript:history.back()'>前のページに戻る</a>】";
s += "【<a href='javascript:setReady()'>次のランダム問題に進む</a>】";
document.getElementById("text_s").innerHTML = s;
}
}
</script>
</body>
</html>
ItoRino