แบบทดสอบคำศัพท์ ป.1 หมวดสี (Colors – 10 ข้อ)

#wp-quiz-wrapper { font-family: inherit; color: #333; padding: 10px; } #wp-quiz-wrapper .quiz-card { background: #ffffff; padding: 25px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); box-sizing: border-box; border: 1px solid #eaeaea; } #wp-quiz-wrapper h1 { color: #2c3e50; text-align: center; font-size: 1.4rem; margin-bottom: 20px; line-height: 1.4; } #wp-quiz-wrapper .start-screen { text-align: center; padding: 10px 0; } #wp-quiz-wrapper .name-input { width: 100%; padding: 12px; font-size: 1.1rem; border: 2px solid #bdc3c7; border-radius: 8px; margin: 15px 0 20px 0; box-sizing: border-box; text-align: center; } #wp-quiz-wrapper .name-input:focus { border-color: #3498db; outline: none; } #wp-quiz-wrapper .start-btn { background-color: #27ae60; color: white; border: none; padding: 12px 30px; font-size: 1.1rem; border-radius: 8px; cursor: pointer; width: 100%; } #wp-quiz-wrapper .start-btn:hover { background-color: #219653; } #wp-quiz-wrapper .error-msg { color: #e74c3c; font-size: 0.95rem; margin-top: -10px; margin-bottom: 15px; display: none; } #wp-quiz-wrapper .question-box { font-size: 1.1rem; font-weight: bold; margin-bottom: 20px; color: #34495e; background: #eef2f7; padding: 15px; border-radius: 8px; text-align: center; } #wp-quiz-wrapper .options-container { display: flex; flex-direction: column; gap: 12px; } /* สไตล์ปุ่มตัวเลือกสีแบบไดนามิก */ #wp-quiz-wrapper .option-btn { border: 2px solid #ccc; padding: 14px 20px; font-size: 1.1rem; font-weight: bold; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; text-align: center; width: 100%; box-sizing: border-box; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } #wp-quiz-wrapper .option-btn:hover:not(:disabled) { opacity: 0.9; transform: translateY(-2px); } #wp-quiz-wrapper .option-btn:disabled { cursor: not-allowed; opacity: 0.8; } /* สีพื้นหลังเฉพาะของแต่ละปุ่มตามความหมาย (กำหนดผ่าน JS หรือคลาส) */ #wp-quiz-wrapper .correct { background-color: #2ecc71 !important; border-color: #27ae60 !important; color: white !important; } #wp-quiz-wrapper .incorrect { background-color: #e74c3c !important; border-color: #c0392b !important; color: white !important; } #wp-quiz-wrapper #feedback { margin-top: 15px; text-align: center; font-weight: bold; font-size: 1.05rem; min-height: 25px; } #wp-quiz-wrapper .next-btn { display: none; margin: 20px auto 0 auto; background-color: #27ae60; color: white; border: none; padding: 10px 25px; font-size: 1rem; border-radius: 8px; cursor: pointer; } #wp-quiz-wrapper .next-btn:hover { background-color: #219653; } #wp-quiz-wrapper .result-box { text-align: center; display: none; } #wp-quiz-wrapper .result-box h2 { color: #2c3e50; margin-bottom: 5px; } #wp-quiz-wrapper .student-name-display { font-size: 1.1rem; color: #34495e; margin-bottom: 5px; font-weight: bold; } #wp-quiz-wrapper .score-display { font-size: 1.6rem; color: #e67e22; font-weight: bold; margin: 10px 0; } #wp-quiz-wrapper .leaderboard-section { margin-top: 25px; text-align: left; background: #f8f9fa; padding: 15px; border-radius: 10px; border: 1px solid #e9ecef; } #wp-quiz-wrapper .leaderboard-title { font-size: 1.1rem; font-weight: bold; color: #2c3e50; margin-bottom: 10px; text-align: center; } #wp-quiz-wrapper .leaderboard-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } #wp-quiz-wrapper .leaderboard-table th, #wp-quiz-wrapper .leaderboard-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #dee2e6; } #wp-quiz-wrapper .leaderboard-table th { color: #495057; background-color: #e9ecef; } #wp-quiz-wrapper .leaderboard-table td:nth-child(3), #wp-quiz-wrapper .leaderboard-table th:nth-child(3) { text-align: right; } #wp-quiz-wrapper .restart-btn { background-color: #3498db; color: white; border: none; padding: 12px 30px; font-size: 1rem; border-radius: 8px; cursor: pointer; margin-top: 20px; } #wp-quiz-wrapper .restart-btn:hover { background-color: #2980b9; } #wp-quiz-wrapper .progress { font-size: 0.9rem; color: #7f8c8d; margin-bottom: 10px; text-align: right; } แบบทดสอบคำศัพท์ ป.1หมวดสี (Colors - 10 ข้อ) กรุณากรอกชื่อ-นามสกุล หรือชื่อเล่น ก่อนเริ่มทำแบบทดสอบครับ ⚠️ กรุณากรอกชื่อก่อนเริ่มทำแบบทดสอบครับ เริ่มทำแบบทดสอบ ข้อที่ 1 / 10 กำลังโหลดคำถาม... ข้อถัดไป สรุปผลการทดสอบ 🏆 สถิติคะแนนสูงสุด 10 อันดับ อันดับ ชื่อผู้สอบ คะแนน ทำแบบทดสอบใหม่อีกครั้ง (function() { // ข้อมูลหมวดสี 10 คำ พร้อมกำหนดโค้ดสีพื้นหลังและสีตัวหนังสือให้อ่านง่าย const rawData = [ { en: "Red", th: "สีแดง", bg: "#e74c3c", color: "#ffffff" }, { en: "Blue", th: "สีฟ้า / สีน้ำเงิน", bg: "#3498db", color: "#ffffff" }, { en: "Yellow", th: "สีเหลือง", bg: "#f1c40f", color: "#2c3e50" }, { en: "Green", th: "สีเขียว", bg: "#2ecc71", color: "#ffffff" }, { en: "Orange", th: "สีส้ม", bg: "#e67e22", color: "#ffffff" }, { en: "Purple", th: "สีม่วง", bg: "#9b59b6", color: "#ffffff" }, { en: "Pink", th: "สีชมพู", bg: "#ff69b4", color: "#ffffff" }, { en: "Black", th: "สีดำ", bg: "#2c3e50", color: "#ffffff" }, { en: "White", th: "สีขาว", bg: "#ecf0f1", color: "#2c3e50" }, { en: "Brown", th: "สีน้ำตาล", bg: "#8d5524", color: "#ffffff" } ]; let questions = []; let currentQuestionIndex = 0; let score = 0; let answered = false; let studentName = ""; function shuffleArray(array) { let arr = [...array]; for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; } window.startQuiz = function() { const nameInput = document.getElementById("student-name").value.trim(); const errorMsg = document.getElementById("error-msg"); if (nameInput === "") { errorMsg.style.display = "block"; return; } errorMsg.style.display = "none"; studentName = nameInput; questions = shuffleArray(rawData); currentQuestionIndex = 0; score = 0; document.getElementById("start-screen").style.display = "none"; document.getElementById("quiz-container").style.display = "block"; loadQuestion(); } function loadQuestion() { answered = false; document.getElementById("feedback").innerHTML = ""; document.getElementById("next-btn").style.display = "none"; const currentQ = questions[currentQuestionIndex]; document.getElementById("progress-text").innerText = `ข้อที่ ${currentQuestionIndex + 1} / 10`; document.getElementById("question-text").innerText = `คำศัพท์คำว่า "${currentQ.en}" ตรงกับสีในข้อใด?`; let wrongOptions = rawData.filter(item => item.th !== currentQ.th); let shuffledWrong = shuffleArray(wrongOptions); let options = [currentQ, shuffledWrong[0], shuffledWrong[1]]; options = shuffleArray(options); const optionsContainer = document.getElementById("options-container"); optionsContainer.innerHTML = ""; options.forEach(opt => { const btn = document.createElement("button"); btn.className = "option-btn"; btn.innerText = opt.th; // กำหนดสีพื้นหลังและสีตัวอักษรตามค่าที่ตั้งไว้ในข้อมูลสี btn.style.backgroundColor = opt.bg; btn.style.color = opt.color; btn.onclick = () => selectAnswer(btn, opt.th, currentQ.th); optionsContainer.appendChild(btn); }); } function selectAnswer(button, selectedAnswer, correctAnswer) { if (answered) return; answered = true; const allButtons = document.querySelectorAll("#wp-quiz-wrapper .option-btn"); if (selectedAnswer === correctAnswer) { button.classList.add("correct"); document.getElementById("feedback").innerHTML = "✨ ถูกต้องเก่งมากครับ! ✨"; score++; } else { button.classList.add("incorrect"); document.getElementById("feedback").innerHTML = `❌ ยังไม่ถูกต้องครับ คำตอบที่ถูกคือ "${correctAnswer}"`; allButtons.forEach(btn => { if (btn.innerText === correctAnswer) { btn.classList.add("correct"); } }); } allButtons.forEach(btn => btn.disabled = true); const nextBtn = document.getElementById("next-btn"); if (currentQuestionIndex < questions.length - 1) { nextBtn.innerText = "ข้อถัดไป"; } else { nextBtn.innerText = "ดูผลคะแนน"; } nextBtn.style.display = "block"; } window.nextQuestion = function() { currentQuestionIndex++; if (currentQuestionIndex < questions.length) { loadQuestion(); } else { showResult(); } } function showResult() { document.getElementById("quiz-container").style.display = "none"; document.getElementById("result-box").style.display = "block"; document.getElementById("result-name").innerText = `ผู้สอบ: ${studentName}`; const percentage = (score / questions.length) * 100; document.getElementById("score-display").innerText = `ทำได้ ${score} จาก ${questions.length} คะแนน (${percentage.toFixed(0)}%)`; let comment = ""; if (percentage === 100) { comment = "🌟 ยอดเยี่ยมมาก! ได้คะแนนเต็มเลย เก่งสุดๆ ครับ!"; } else if (percentage >= 80) { comment = "🎉 เก่งมากครับ ความจำดีเยี่ยมผ่านฉลุย!"; } else if (percentage >= 50) { comment = "👍 ทำได้ดีระดับหนึ่ง ทบทวนเพิ่มเติมอีกนิดเก่งขึ้นแน่นอนครับ!"; } else { comment = "💪 สู้ๆ ครับ ลองฝึกฝนท่องจำคำศัพท์แล้วกลับมาทำใหม่อีกรอบนะ!"; } document.getElementById("result-comment").innerText = comment; // บันทึกและอัปเดตตาราง Leaderboard (ใช้คีย์แยกหมวดสี) saveAndRenderLeaderboard(studentName, score, questions.length); } function saveAndRenderLeaderboard(name, userScore, totalQ) { let leaderboard = JSON.parse(localStorage.getItem('wp_quiz_lb_p1_colors') || '[]'); leaderboard.push({ name: name, score: userScore, total: totalQ }); leaderboard.sort((a, b) => b.score - a.score); if (leaderboard.length > 10) { leaderboard = leaderboard.slice(0, 10); } localStorage.setItem('wp_quiz_lb_p1_colors', JSON.stringify(leaderboard)); const tbody = document.getElementById("leaderboard-body"); tbody.innerHTML = ""; if (leaderboard.length === 0) { tbody.innerHTML = `ยังไม่มีข้อมูลสถิติ`; return; } leaderboard.forEach((item, index) => { let row = document.createElement("tr"); let rankIcon = `#${index + 1}`; if (index === 0) rankIcon = "🥇 1"; if (index === 1) rankIcon = "🥈 2"; if (index === 2) rankIcon = "🥉 3"; row.innerHTML = ` ${rankIcon} ${escapeHtml(item.name)} ${item.score} / ${item.total} `; tbody.appendChild(row); }); } function escapeHtml(text) { return text.replace(/&/g, "&").replace(//g, ">").replace(/"/g, """).replace(/'/g, "'"); } window.resetToStart = function() { document.getElementById("result-box").style.display = "none"; document.getElementById("start-screen").style.display = "block"; document.getElementById("student-name").value = ""; } })();

แบบทดสอบคำศัพท์ ป.1 หมวดสี (Colors – 10 ข้อ)

แบบทดสอบคำศัพท์ ป.1
หมวดสี (Colors – 10 ข้อ)

สรุปผลการทดสอบ

Related

Authain

Read Next

แบบทดสอบคำศัพท์ ป.1 หมวดสัตว์ (Animals – 20 ข้อ)

แบบทดสอบคำศัพท์ ป.1สมาชิกในครอบครัว (Family – 10 ข้อ)

แบบทดสอบคำศัพท์ ป.1 Alphabets & Numbers (20 ข้อ)

คำกริยาใช้บ่อยระดับ C1-C2 ชุดที่ 2

คำกริยาใช้บ่อยระดับ C1-C2 ชุดที่ 1

ข้อสอบพัฒนาอัจฉริยภาพ สสวท. วิชาวิทยาศาสตร์ ประถมศึกษาปีที่ 3 พร้อมเฉลย รวม หลาย พ.ศ.

ข้อสอบพัฒนาอัจฉริยภาพ สสวท. วิชาวิทยาศาสตร์ ประถมศึกษาปีที่ 6 พร้อมเฉลย รวม หลาย พ.ศ.

วิทยาศาสตร์ชั้นประถมศึกษาปีที่ 1 ชุดที่ 1

ข้อสอบออนไลน์ พรบ.ข้อมูลข่าวสาร ชุด 2

ข้อสอบออนไลน์ พรบ.ข้อมูลข่าวสาร ชุด 1

แบบทดสอบคำศัพท์ ป.1 หมวดสัตว์ (Animals – 20 ข้อ)

แบบทดสอบคำศัพท์ ป.1สมาชิกในครอบครัว (Family – 10 ข้อ)

แบบทดสอบคำศัพท์ ป.1 Alphabets & Numbers (20 ข้อ)

คำกริยาใช้บ่อยระดับ C1-C2 ชุดที่ 2

คำกริยาใช้บ่อยระดับ C1-C2 ชุดที่ 1

ข้อสอบพัฒนาอัจฉริยภาพ สสวท. วิชาวิทยาศาสตร์ ประถมศึกษาปีที่ 3 พร้อมเฉลย รวม หลาย พ.ศ.

ข้อสอบพัฒนาอัจฉริยภาพ สสวท. วิชาวิทยาศาสตร์ ประถมศึกษาปีที่ 6 พร้อมเฉลย รวม หลาย พ.ศ.

วิทยาศาสตร์ชั้นประถมศึกษาปีที่ 1 ชุดที่ 1

ข้อสอบออนไลน์ พรบ.ข้อมูลข่าวสาร ชุด 2

ข้อสอบออนไลน์ พรบ.ข้อมูลข่าวสาร ชุด 1

แบบทดสอบคำศัพท์ ป.1หมวดสี (Colors – 10 ข้อ)

สรุปผลการทดสอบ

Related

Read Next

แบบทดสอบคำศัพท์ ป.1 หมวดสัตว์ (Animals – 20 ข้อ)

แบบทดสอบคำศัพท์ ป.1สมาชิกในครอบครัว (Family – 10 ข้อ)

แบบทดสอบคำศัพท์ ป.1 Alphabets & Numbers (20 ข้อ)

คำกริยาใช้บ่อยระดับ C1-C2 ชุดที่ 2

คำกริยาใช้บ่อยระดับ C1-C2 ชุดที่ 1

ข้อสอบพัฒนาอัจฉริยภาพ สสวท. วิชาวิทยาศาสตร์ ประถมศึกษาปีที่ 3 พร้อมเฉลย รวม หลาย พ.ศ.

ข้อสอบพัฒนาอัจฉริยภาพ สสวท. วิชาวิทยาศาสตร์ ประถมศึกษาปีที่ 6 พร้อมเฉลย รวม หลาย พ.ศ.

วิทยาศาสตร์ชั้นประถมศึกษาปีที่ 1 ชุดที่ 1

ข้อสอบออนไลน์ พรบ.ข้อมูลข่าวสาร ชุด 2

ข้อสอบออนไลน์ พรบ.ข้อมูลข่าวสาร ชุด 1

แบบทดสอบคำศัพท์ ป.1 Alphabets & Numbers (20 ข้อ)

แบบทดสอบคำศัพท์ ป.1สมาชิกในครอบครัว (Family - 10 ข้อ)

แบบทดสอบคำศัพท์ ป.1
หมวดสี (Colors – 10 ข้อ)