Newer
Older
2023-ayano2 / question.html
@Sugawara Ayano Sugawara Ayano on 24 Nov 2023 1 KB leaflet added
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>化学クイズ</title>
<link rel="stylesheet" type="text/css" href="question.css">
<script src="question.js"></script>
</head>

<body>
<h1>化学に関するクイズを出題!</h1>
<p>頑張って問いてみようか!</p>

<div class="question">
<div class="question__wrapper">
<h2 id="js-questionNumber" class="question__number">
第○問
</h2>

<p id="js-questionText" class="quuestion_text">
text
</p>

<div class="question_options">
<button type="button" class="question_item js-questionItem">選択肢1</button>
<button type="button" class="question_item js-questionItem">選択肢2</button>
<button type="button" class="question_item js-questionItem">選択肢3</button>
<button type="button" class="question_item js-questionItem">選択肢4</button>

</div>
</div>
</div>

<div class="answer">
<p id="js-answerResult" class="answer_result"></p>
<button type="button" id="js-nextQuesttion">次の問題へGO!</button>
<h2>詳細</h2>
<p id="js-answerExplanation" class="answer_explanation"></p>
</div>


</body>
</html>