แบบทดสอบคำศัพท์ ป.1อาหารและเครื่องดื่ม (Food & Drink – 15 ข้อ)

#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; } /* แผงข้ามข้อ (Question Navigator) - 15 ข้อ ปรับให้เล็กลง */ #wp-quiz-wrapper .navigator-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 15px; background: #f1f5f9; padding: 8px; border-radius: 8px; } #wp-quiz-wrapper .nav-dot { background: #ffffff; border: 1px solid #cbd5e1; color: #475569; padding: 6px 0; font-size: 0.85rem; border-radius: 5px; cursor: pointer; font-weight: bold; transition: all 0.2s; text-align: center; } #wp-quiz-wrapper .nav-dot.active { border-color: #3498db; background: #3498db; color: white; } #wp-quiz-wrapper .nav-dot.answered-correct { background: #2ecc71; color: white; border-color: #2ecc71; } #wp-quiz-wrapper .nav-dot.answered-incorrect { background: #e74c3c; color: white; border-color: #e74c3c; } /* Progress Bar สไตล์ใหม่ */ #wp-quiz-wrapper .progress-bar-container { width: 100%; background-color: #e2e8f0; border-radius: 10px; height: 12px; margin-bottom: 15px; overflow: hidden; } #wp-quiz-wrapper .progress-bar-fill { height: 100%; background-color: #27ae60; width: 0%; transition: width 0.3s ease; } /* แถบบน: เวลาและความคืบหน้าข้อ */ #wp-quiz-wrapper .quiz-header-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 0.95rem; color: #64748b; font-weight: 600; } #wp-quiz-wrapper .timer-box { background: #f8fafc; padding: 5px 12px; border-radius: 6px; border: 1px solid #e2e8f0; color: #e67e22; } #wp-quiz-wrapper .question-box { font-size: 1.15rem; font-weight: bold; margin-bottom: 20px; color: #34495e; background: #eef2f7; padding: 20px; border-radius: 8px; text-align: center; } #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; display: flex; align-items: center; gap: 12px; } #wp-quiz-wrapper .option-icon { font-size: 1.4rem; min-width: 30px; text-align: center; } #wp-quiz-wrapper .option-btn:hover:not(:disabled) { background-color: #3498db; color: white; } #wp-quiz-wrapper .option-btn:disabled { cursor: not-allowed; opacity: 0.85; } #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 .quiz-nav-buttons { display: flex; justify-content: space-between; margin-top: 20px; } #wp-quiz-wrapper .nav-action-btn { background-color: #95a5a6; color: white; border: none; padding: 10px 20px; font-size: 0.95rem; border-radius: 8px; cursor: pointer; } #wp-quiz-wrapper .nav-action-btn:hover { background-color: #7f8c8d; } #wp-quiz-wrapper .next-action-btn { background-color: #27ae60; color: white; border: none; padding: 10px 25px; font-size: 0.95rem; border-radius: 8px; cursor: pointer; } #wp-quiz-wrapper .next-action-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.5rem; color: #e67e22; font-weight: bold; margin: 10px 0; } #wp-quiz-wrapper .stat-details { font-size: 0.95rem; color: #64748b; margin-bottom: 15px; } #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.9rem; } #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), #wp-quiz-wrapper .leaderboard-table td:nth-child(4), #wp-quiz-wrapper .leaderboard-table th:nth-child(4) { 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; } แบบทดสอบคำศัพท์ ป.1อาหารและเครื่องดื่ม (Food & Drink - 15 ข้อ) กรุณากรอกชื่อ-นามสกุล หรือชื่อเล่น ก่อนเริ่มทำแบบทดสอบครับ ⚠️ กรุณากรอกชื่อก่อนเริ่มทำแบบทดสอบครับ เริ่มทำแบบทดสอบ ข้อที่ 1 / 15 ⏱️ 00:00 กำลังโหลดคำถาม... ⬅ ก่อนหน้า ข้อถัดไป ➡️ สรุปผลการทดสอบ 🏆 10 อันดับคะแนนสูงสุด (ถูกและเร็วที่สุด) อันดับ ชื่อผู้สอบ คะแนน เวลา 🔄 ทำแบบทดสอบใหม่อีกครั้ง (function() { const rawData = [ { en: "Food (ฟู้ด)", th: "อาหาร", icon: "🍛" }, { en: "Water (วอเทอร์)", th: "น้ำ", icon: "💧" }, { en: "Milk (มิลล์)", th: "นม", icon: "🥛" }, { en: "Rice (ไรส)", th: "ข้าว", icon: "🍚" }, { en: "Egg (เอกซ์)", th: "ไข่", icon: "🥚" }, { en: "Fish (ฟิช)", th: "ปลา (เนื้อปลา)", icon: "🐟" }, { en: "Meat (มีท)", th: "เนื้อสัตว์", icon: "🥩" }, { en: "Fruit (ฟรุ๊ท)", th: "ผลไม้", icon: "🍎" }, { en: "Apple (แอปเปิล)", th: "แอปเปิ้ล", icon: "🍏" }, { en: "Banana (กล้วย)", th: "กล้วย", icon: "🍌" }, { en: "Orange (ส้ม)", th: "ส้ม", icon: "🍊" }, { en: "Cake (เค้ก)", th: "เค้ก", icon: "🍰" }, { en: "Bread (เบรด)", th: "ขนมปัง", icon: "🍞" }, { en: "Ice cream (ไอศกรีม)", th: "ไอศกรีม", icon: "🍦" }, { en: "Eat (อีท)", th: "กิน", icon: "😋" } ]; let questions = []; let currentQuestionIndex = 0; let userAnswers = {}; let studentName = ""; let timerInterval = null; let secondsElapsed = 0; function playSound(type) { try { const AudioContext = window.AudioContext || window.webkitAudioContext; if (!AudioContext) return; const ctx = new AudioContext(); if (type === 'correct') { playTone(ctx, 523.25, 0, 0.1); playTone(ctx, 783.99, 0.1, 0.2); } else if (type === 'incorrect') { 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; userAnswers = {}; secondsElapsed = 0; document.getElementById("start-screen").style.display = "none"; document.getElementById("quiz-container").style.display = "block"; buildNavigator(); loadQuestion(); updateProgressBar(); startTimer(); } function startTimer() { if (timerInterval) clearInterval(timerInterval); timerInterval = setInterval(() => { secondsElapsed++; let mins = Math.floor(secondsElapsed / 60); let secs = secondsElapsed % 60; document.getElementById("timer-display").innerText = `⏱️ ${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`; }, 1000); } function buildNavigator() { const grid = document.getElementById("navigator-grid"); grid.innerHTML = ""; questions.forEach((q, idx) => { const dot = document.createElement("button"); dot.className = "nav-dot"; dot.innerText = idx + 1; dot.onclick = () => goToQuestion(idx); dot.id = `nav-dot-${idx}`; grid.appendChild(dot); }); updateNavigatorUI(); } function updateNavigatorUI() { questions.forEach((q, idx) => { const dot = document.getElementById(`nav-dot-${idx}`); if (!dot) return; dot.className = "nav-dot"; if (idx === currentQuestionIndex) { dot.classList.add("active"); } if (userAnswers[idx] !== undefined) { if (userAnswers[idx].text === q.th) { dot.classList.add("answered-correct"); } else { dot.classList.add("answered-incorrect"); } } }); } function updateProgressBar() { const answeredCount = Object.keys(userAnswers).length; const percentage = (answeredCount / questions.length) * 100; document.getElementById("progress-bar-fill").style.width = percentage + "%"; } function loadQuestion() { updateNavigatorUI(); updateProgressBar(); document.getElementById("feedback").innerHTML = ""; const currentQ = questions[currentQuestionIndex]; document.getElementById("progress-text").innerText = `ข้อที่ ${currentQuestionIndex + 1} / ${questions.length}`; document.getElementById("question-text").innerText = `คำศัพท์คำว่า "${currentQ.en}" ตรงกับความหมายในข้อใด?`; if (!currentQ.shuffledOptions) { let wrongOptions = rawData.filter(item => item.th !== currentQ.th); let shuffledWrong = shuffleArray(wrongOptions); let optionsData = [ { text: currentQ.th, icon: currentQ.icon }, { text: shuffledWrong[0].th, icon: shuffledWrong[0].icon }, { text: shuffledWrong[1].th, icon: shuffledWrong[1].icon } ]; currentQ.shuffledOptions = shuffleArray(optionsData); } const optionsContainer = document.getElementById("options-container"); optionsContainer.innerHTML = ""; const hasAnswered = userAnswers[currentQuestionIndex] !== undefined; const selectedOpt = userAnswers[currentQuestionIndex]; currentQ.shuffledOptions.forEach(opt => { const btn = document.createElement("button"); btn.className = "option-btn"; btn.innerHTML = `${opt.icon} ${opt.text}`; if (hasAnswered) { btn.disabled = true; if (opt.text === currentQ.th) { btn.classList.add("correct"); } else if (selectedOpt && opt.text === selectedOpt.text) { btn.classList.add("incorrect"); } } else { btn.onclick = () => selectAnswer(btn, opt, currentQ.th); } optionsContainer.appendChild(btn); }); if (hasAnswered && selectedOpt) { if (selectedOpt.text === currentQ.th) { document.getElementById("feedback").innerHTML = `✨ ถูกต้อง! ${currentQ.icon} ${currentQ.en} = ${currentQ.th}`; } else { document.getElementById("feedback").innerHTML = `❌ ยังไม่ถูกต้อง คำตอบที่ถูกต้องคือ: ${currentQ.icon} "${currentQ.th}"`; } } document.getElementById("prev-btn").style.display = currentQuestionIndex === 0 ? "none" : "block"; const nextBtn = document.getElementById("next-btn"); if (currentQuestionIndex === questions.length - 1) { nextBtn.innerText = "ส่งคำตอบและดูผลคะแนน 🏁"; } else { nextBtn.innerText = "ข้อถัดไป ➡️"; } } function selectAnswer(button, selectedOptionObj, correctAnswer) { if (userAnswers[currentQuestionIndex] !== undefined) return; userAnswers[currentQuestionIndex] = selectedOptionObj; const allButtons = document.querySelectorAll("#wp-quiz-wrapper .option-btn"); allButtons.forEach(btn => btn.disabled = true); const currentQ = questions[currentQuestionIndex]; if (selectedOptionObj.text === correctAnswer) { button.classList.add("correct"); document.getElementById("feedback").innerHTML = `✨ ถูกต้องเก่งมากครับ! ${currentQ.icon} ${currentQ.en} = ${currentQ.th}`; playSound('correct'); } else { button.classList.add("incorrect"); document.getElementById("feedback").innerHTML = `❌ ยังไม่ถูกต้อง คำตอบที่ถูกคือ: ${currentQ.icon} "${correctAnswer}"`; playSound('incorrect'); allButtons.forEach(btn => { if (btn.innerText.includes(correctAnswer)) { btn.classList.add("correct"); } }); } updateNavigatorUI(); updateProgressBar(); } window.prevQuestion = function() { if (currentQuestionIndex > 0) { currentQuestionIndex--; loadQuestion(); } } window.nextQuestion = function() { if (currentQuestionIndex < questions.length - 1) { currentQuestionIndex++; loadQuestion(); } else { showResult(); } } window.goToQuestion = function(index) { currentQuestionIndex = index; loadQuestion(); } function showResult() { if (timerInterval) clearInterval(timerInterval); document.getElementById("quiz-container").style.display = "none"; document.getElementById("result-box").style.display = "block"; document.getElementById("result-name").innerText = `ผู้สอบ: ${studentName}`; let score = 0; questions.forEach((q, idx) => { if (userAnswers[idx] && userAnswers[idx].text === q.th) { score++; } }); const percentage = (score / questions.length) * 100; document.getElementById("score-display").innerText = `ทำได้ ${score} จาก ${questions.length} คะแนน (${percentage.toFixed(0)}%)`; let mins = Math.floor(secondsElapsed / 60); let secs = secondsElapsed % 60; let timeStr = `${mins > 0 ? mins + ' นาที ' : ''}${secs} วินาที`; document.getElementById("stat-details").innerText = `⏱️ เวลาที่ใช้ทั้งหมด: ${timeStr}`; 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, secondsElapsed); } function saveAndRenderLeaderboard(name, userScore, totalQ, timeSec) { let leaderboard = JSON.parse(localStorage.getItem('wp_quiz_lb_p1_food_v1') || '[]'); leaderboard.push({ name: name, score: userScore, total: totalQ, time: timeSec }); leaderboard.sort((a, b) => { if (b.score !== a.score) { return b.score - a.score; } return a.time - b.time; }); if (leaderboard.length > 10) { leaderboard = leaderboard.slice(0, 10); } localStorage.setItem('wp_quiz_lb_p1_food_v1', 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"; let m = Math.floor(item.time / 60); let s = item.time % 60; let formattedTime = `${m > 0 ? m + 'น. ' : ''}${s}ว.`; row.innerHTML = ` ${rankIcon} ${escapeHtml(item.name)} ${item.score} / ${item.total} ${formattedTime} `; 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อาหารและเครื่องดื่ม (Food & Drink – 15 ข้อ)

แบบทดสอบคำศัพท์ ป.1
อาหารและเครื่องดื่ม (Food & Drink – 15 ข้อ)

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

Related

Authain

Read Next

แบบทดสอบคำศัพท์ ป.1โรงเรียนและห้องเรียน (School & Classroom – 20 ข้อ)

แบบทดสอบคณิตศาสตร์ เข้า ม.1 Gifted โรงเรียนดัง Live worksheet

แบบทดสอบความรู้ วันสำคัญทางพุทธศาสนา (20 ข้อ)

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

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

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

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

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

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

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

แบบทดสอบคำศัพท์ ป.1โรงเรียนและห้องเรียน (School & Classroom – 20 ข้อ)

แบบทดสอบคณิตศาสตร์ เข้า ม.1 Gifted โรงเรียนดัง Live worksheet

แบบทดสอบความรู้ วันสำคัญทางพุทธศาสนา (20 ข้อ)

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

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

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

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

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

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

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

แบบทดสอบคำศัพท์ ป.1อาหารและเครื่องดื่ม (Food & Drink – 15 ข้อ)

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

Related

Read Next

แบบทดสอบคำศัพท์ ป.1โรงเรียนและห้องเรียน (School & Classroom – 20 ข้อ)

แบบทดสอบคณิตศาสตร์ เข้า ม.1 Gifted โรงเรียนดัง Live worksheet

แบบทดสอบความรู้ วันสำคัญทางพุทธศาสนา (20 ข้อ)

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

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

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

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

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

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

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

แบบทดสอบคำศัพท์ ป.1โรงเรียนและห้องเรียน (School & Classroom - 20 ข้อ)

Related Articles

แบบทดสอบคำศัพท์ ป.1
อาหารและเครื่องดื่ม (Food & Drink – 15 ข้อ)