- 奇葩校慶社團靜態展
答題遊戲製作介紹
(並沒有為電腦優化界面喔)
HTML
建立標題
<h1>明倫知多少？</h1>插入題目
- 建立
id為question的div
<div id="question"></div>建立選項
- 建立
id為options的div - 製作四個選項的按鈕，id依序為
option-1 ~option-4 - 與題目庫作為連結，為方便陣列統整，
onclick="check_answer(0)"~onclick="check_answer(3)"
<div id="options"> <button id="option-1" onclick="check_answer(0)"></button> <button id="option-2" onclick="check_answer(1)"></button> <button id="option-3" onclick="check_answer(2)"></button> <button id="option-4" onclick="check_answer(3)"></button></div>建立分數容器
- 建立
id為score-container的div - 建立
id為score的span
<div id=""> 答對題數: <span id="score">0</span></div>建立最終畫面
- 放置在最上方，先隱藏，遊戲結束後再顯示
<div id="end-container" style="display: none;"> <div id="end-container-text">遊戲結束</div> <div id="end-container-score">答對題數: <span id="score-end">0</span></div> <div id="end-container-length_questions">共 <span id="length_question"> 0 </span> 題</div></div>引入
- 引入題目庫
<script src="Questions Repositories.js"></script>- 引入規則庫
<script src="rule.js"></script>- 引入CSS
<link rel="stylesheet" href="style.css">Javascript
建立變數
const score_element = document.getElementById("score");const end_container = document.getElementById("end-container");const game_over_score = document.getElementById("score-end");const length_question = document.getElementById("length_question");題目內
- 先確認題目庫長度小於，這樣題目才能進行
function show_question(index) { if (index < questions.length) { ... }}建立題目變數
const questionElement = document.getElementById("question");顯示題號
questionElement.textContent = current_question_index + 1 + (". ") + questions[index].question;創建選項
- 先建立選項變數
- 清空內容
const optionsElement = document.getElementById("options");optionsElement.innerHTML = "";填充選項
- 題目庫內的先跑一遍
questions[index].options.forEach((option, i) => { ... });建立按鈕變數
const button = document.createElement("button");選項內容及題號
- 用ASCII碼，建立選項編號
- 選項內容 option
button.textContent = "(" + String.fromCharCode(65 + i) + ") " + option;確認選項及接連下一題
button.onclick = () => check_answer(i);optionsElement.appendChild(button);length已盡，故遊戲結束
else { end_container.style.display = "block"; }分數的變動
function check_answer(selected_index) { ...}- 如果選項正確，加分
- 如果答錯，顯示”答錯了”
if (selected_index === questions[current_question_index].correct_answer) { score += 1; game_over_score.textContent = score; score_element.textContent = score; } else { alert("答錯了唷！") }- 更新題目，變數+1
current_question_index++;show_question(current_question_index);回傳
game_over_score.innerHTML = score;score_element.innerHTML = score;length_question.innerHTML = questions.length;show_question(current_question_index);題目庫示範
const questions = [ { question: "請問除了太陽之外距離明倫高中最近的恆星是？", options: ["南門二","半人馬座α星C","天狼星","參宿四"], correct_answer: 1 },很多之類的～
Thanks for reading!