Newer
Older
rails-otp-try / CPM-program / app / views / quiz / quiz-2.html
@ItoRino ItoRino on 27 Dec 7 KB add
<!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>   
    </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>&copy; 2022 プチ論研究-伊藤理乃</small>
    </footer>
    <script>
        //初期設定
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] = ["「==」の意味は?","左側と右側が等しい","左側が右側よりも小さい","左側が右側以下",1];
qa[8] = ["CSVの構造の説明で正しいのはどれか?","フィールドをフィールドごとにカンマで区切り1レコードを一行に納めたテキストファイル形式","()内の文字列を出力して、最後に改行が追加される","列の要素を小さい順に並べ替えた結果を返す",1];
qa[9] = ["「reverse」の処理方法は?","配列の末尾に要素を追加する","繰り返しの構造を作る","配列の要素の順序を逆にした配列を返す",3];
qa[10] = ["「<」の意味は?","左側が右側以下","左側が右側よりも小さい","左側よりも大きい",2];
qa[11] = ["「soat」の処理方法は?","配列や範囲などの複数の間を順に変数に代入する","繰り返し処理をスキップして次のループに移る","配列の要素を小さい順に並べ変えた結果を返す",3];
qa[12] = ["「<=」の意味は?","左側が右側以下","左側よりも大きい","左側が右側以上",1];
qa[13] = ["「push」の処理方法は?","配列の長さ(要素の数)を返す","配列の松尾に要素を追加","配列の先頭の要素を取り除きその値を返す",2];
qa[14] = ["「>」の意味は?","左側よりも大きい","左側が右側以上","○○であり△△である",1];
qa[15] = ["「length」の処理方法は?","繰り返しの構造を作る","配列の末尾に要素を追加する","配列の長さ(要素の数)を返す",3];
qa[16] = ["「>=」の意味は?","左側が右側以下","○○であり△△である","左側が右側以上",3];
qa[17] = ["「&&」の意味は?","○○であり△△である","○○か△△である","○○は△△ではない",1];
qa[18] = ["「next」の処置方法は?","繰り返しの構造を作る","繰り返し処理をスキップして次のループに移る","繰り返し処理を中止しループを終わらせる",2];
qa[19] = ["「||」の意味は?","○○であり△△である","○○か△△である","○○は△△ではない",2];
qa[20] = ["「!」の意味は?","○○か△△である","○○であり△△であるる","○○は△△ではない",3];
qa[21] = ["「break」の処理方法は?","繰り返し処理をスキップして次のループに映る","繰り返し処理を中止しループを終わらせる","繰り返し処理を中断して最初からもう一度やり直す",2];
qa[22] = ["「while」の処理方法は?","配列の末尾に要素を追加する","繰り返しの構造を作る","配列や範囲などの複数の間を順に変数に代入する",2];
qa[23] = ["forの処理方法は?","配列や範囲などの複数の間を順に変数に代入する","配列の要素を小さい順に並べ替えた結果を返す","配列の末尾に要素を追加する",1];
qa[24] = ["変数とは何か?","値につける名前","複数の値をひとまとめにできるもの","数字の中からランダムに発生させる数",1];
qa[25] = ["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 = "<p><caption>前のページに戻るか次のランダム問題のどちらかを選んでね</caption>";

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>