แบบทดสอบคำศัพท์ ป.1สมาชิกในครอบครัว (Family – 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.2rem; font-weight: bold; margin-bottom: 20px; color: #34495e; background: #eef2f7; padding: 20px; border-radius: 8px; text-align: center; } #wp-quiz-wrapper .question-icon { font-size: 2.5rem; display: block; margin-bottom: 8px; } #wp-quiz-wrapper .options-container { display: flex; flex-direction: column; gap: 12px; } #wp-quiz-wrapper .option-btn { background-color: #ffffff; border: 2px solid #3498db; color: #2980b9; padding: 12px 20px; font-size: 1rem; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; text-align: left; width: 100%; box-sizing: border-box; } #wp-quiz-wrapper .option-btn:hover:not(:disabled) { background-color: #3498db; color: white; } #wp-quiz-wrapper .option-btn:disabled { cursor: not-allowed; opacity: 0.8; } #wp-quiz-wrapper .correct { background-color: #2ecc71 !important; border-color: #2ecc71 !important; color: white !important; } #wp-quiz-wrapper .incorrect { background-color: #e74c3c !important; border-color: #e74c3c !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สมาชิกในครอบครัว (Family - 10 ข้อ) กรุณากรอกชื่อ-นามสกุล หรือชื่อเล่น ก่อนเริ่มทำแบบทดสอบครับ ⚠️ กรุณากรอกชื่อก่อนเริ่มทำแบบทดสอบครับ เริ่มทำแบบทดสอบ ข้อที่ 1 / 10 กำลังโหลดคำถาม... ข้อถัดไป สรุปผลการทดสอบ 🏆 สถิติคะแนนสูงสุด 10 อันดับ อันดับ ชื่อผู้สอบ คะแนน ทำแบบทดสอบใหม่อีกครั้ง (function() { const rawData = [ { en: "Family", th: "ครอบครัว", icon: "👨👩👧👦" }, { en: "Father", th: "พ่อ", icon: "👨" }, { en: "Mother", th: "แม่", icon: "👩" }, { en: "Parents", th: "พ่อแม่", icon: "👫" }, { en: "Brother", th: "พี่ชาย / น้องชาย", icon: "👦" }, { en: "Sister", th: "พี่สาว / น้องสาว", icon: "👧" }, { en: "Grandfather", th: "ปู่ / ตา", icon: "👴" }, { en: "Grandmother", th: "ย่า / ยาย", icon: "👵" }, { en: "Baby", th: "ทารก / เด็กน้อย", icon: "👶" }, { en: "Me", th: "ฉัน", icon: "🧒" } ]; let questions = []; let currentQuestionIndex = 0; let score = 0; let answered = false; let studentName = ""; // ฟังก์ชันสร้างเสียงเอฟเฟกต์ (Web Audio API) function playSound(type) { try { const AudioContext = window.AudioContext || window.webkitAudioContext; if (!AudioContext) return; const ctx = new AudioContext(); if (type === 'correct') { // เสียงตอบถูก: โน้ตคู่สูงสดใส (C5 -> G5) playTone(ctx, 523.25, 0, 0.1); playTone(ctx, 783.99, 0.1, 0.2); } else if (type === 'incorrect') { // เสียงตอบผิด: โน้ตต่ำทุ้ม (G3 -> E3) playTone(ctx, 196.00, 0, 0.15); playTone(ctx, 164.81, 0.12, 0.15); } } catch (e) { // บราวเซอร์บางตัวบล็อกเสียงอัตโนมัติหากยังไม่มีการคลิกโต้ตอบ } } function playTone(ctx, freq, startTime, duration) { const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.type = 'sine'; osc.frequency.value = freq; gain.gain.setValueAtTime(0.15, ctx.currentTime + startTime); gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + startTime + duration); osc.connect(gain); gain.connect(ctx.destination); osc.start(ctx.currentTime + startTime); osc.stop(ctx.currentTime + startTime + duration); } 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").innerHTML = `${currentQ.icon}คำศัพท์คำว่า "${currentQ.en}" ตรงกับความหมายในข้อใด?`; let wrongOptions = rawData.filter(item => item.th !== currentQ.th); let shuffledWrong = shuffleArray(wrongOptions); let options = [currentQ.th, shuffledWrong[0].th, shuffledWrong[1].th]; 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; btn.onclick = () => selectAnswer(btn, opt, 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++; playSound('correct'); // เล่นเสียงตอบถูก } else { button.classList.add("incorrect"); document.getElementById("feedback").innerHTML = `❌ ยังไม่ถูกต้องครับ คำตอบที่ถูกคือ "${correctAnswer}"`; playSound('incorrect'); // เล่นเสียงตอบผิด 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; saveAndRenderLeaderboard(studentName, score, questions.length); } function saveAndRenderLeaderboard(name, userScore, totalQ) { let leaderboard = JSON.parse(localStorage.getItem('wp_quiz_lb_p1_family') || '[]'); 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_family', 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สมาชิกในครอบครัว (Family – 10 ข้อ)

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

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

Related

Authain

Read Next

แบบทดสอบคำศัพท์ ป.1อวัยวะในร่างกาย (Body Parts – 15 ข้อ)

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

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

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

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

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

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

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

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

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

แบบทดสอบคำศัพท์ ป.1อวัยวะในร่างกาย (Body Parts – 15 ข้อ)

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

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

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

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

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

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

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

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

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

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

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

Related

Read Next

แบบทดสอบคำศัพท์ ป.1อวัยวะในร่างกาย (Body Parts – 15 ข้อ)

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

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

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

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

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

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

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

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

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

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

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

Related Articles

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