日々徒然

プログラミングしたりお酒飲んだりする毎日

4/11 英語勉強記録と4択をエスパーする練習

今日も頑張った

part3, 4は相変わらずほとんど聞き取れなくて、part5の語彙問題で見たことない単語が出てきて、精神が崩壊しかけた

『TOEICでsuitは名詞としてほとんど登場しません、見たことないです』みたいな説明がpart5の講座でされてて、「それpart3の演習で出たわ！！！嘘つきやんけ！！！」って一人でブチギレてた

もうTOEICの勉強するよりも4択当てる練習した方が良いと思ったので、専用のhtml作った

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>クイズ</title>
    <style>
        .correct-answer {
            color: red;
        }
    </style>
</head>
<body>
    <div id="quiz-container"></div>
    <button onclick="checkAnswers()">結果を見る</button>
    <script src="script.js"></script>
</body>
</html>

<script type="text/javascript">

const quizContainer = document.getElementById("quiz-container");
const numberOfQuestions = 50;

function generateQuestion(index) {
    const question = document.createElement("div");
    question.classList.add("question");
    question.id = `question-${index}`;

    const choices = ["A", "B", "C", "D"];
    const correctAnswer = Math.floor(Math.random() * 4);

    question.innerHTML = `
        <p>問題 ${index + 1}:</p>
        <form>
            ${choices
                .map(
                    (choice, i) => `
            <label>
                <input type="radio" name="choice" value="${i}" />
                ${choice}
            </label>
            `
                )
                .join("")}
        </form>
        <div class="correct-answer" style="display:none">${choices[correctAnswer]}</div>
    `;

    return { element: question, correctAnswer };
}

const questions = Array.from({ length: numberOfQuestions }, (_, i) =>
    generateQuestion(i)
);

questions.forEach((q) => quizContainer.appendChild(q.element));

function checkAnswers() {
    let correctCount = 0;
    questions.forEach(({ element, correctAnswer }, index) => {
        const userAnswer = Array.from(element.querySelectorAll("input[type=radio]")).find(
            (input) => input.checked
        )?.value;

        if (userAnswer == correctAnswer) {
            correctCount++;
        } else {
            element.querySelector(".correct-answer").style.display = "block";
        }
    });

    alert(`50問中${correctCount}問正解しました。`);
}
</script>

これで勉強しなくても満点取れるな！ヨシ！！