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

#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 { 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; } แบบทดสอบคำศัพท์ ป.1Alphabets & Numbers (20 ข้อ) กรุณากรอกชื่อ-นามสกุล หรือชื่อเล่น ก่อนเริ่มทำแบบทดสอบครับ ⚠️ กรุณากรอกชื่อก่อนเริ่มทำแบบทดสอบครับ เริ่มทำแบบทดสอบ ข้อที่ 1 / 20 กำลังโหลดคำถาม... ข้อถัดไป สรุปผลการทดสอบ 🏆 สถิติคะแนนสูงสุด 10 อันดับ อันดับ ชื่อผู้สอบ คะแนน ทำแบบทดสอบใหม่อีกครั้ง (function() { const rawData = [ { en: "Alphabet", th: "ตัวอักษร" }, { en: "Number", th: "ตัวเลข" }, { en: "One", th: "หนึ่ง" }, { en: "Two", th: "สอง" }, { en: "Three", th: "สาม" }, { en: "Four", th: "สี่" }, { en: "Five", th: "ห้า" }, { en: "Six", th: "หก" }, { en: "Seven", th: "เจ็ด" }, { en: "Eight", th: "แปด" }, { en: "Nine", th: "เก้า" }, { en: "Ten", th: "สิบ" }, { en: "Eleven", th: "สิบเอ็ด" }, { en: "Twelve", th: "สิบสอง" }, { en: "Thirteen", th: "สิบสาม" }, { en: "Fourteen", th: "สิบสี่" }, { en: "Fifteen", th: "สิบห้า" }, { en: "Sixteen", th: "สิบหก" }, { en: "Seventeen", th: "สิบเจ็ด" }, { en: "Eighteen", th: "สิบแปด" } ]; 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} / 20`; document.getElementById("question-text").innerText = `คำศัพท์คำว่า "${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++; } 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_alpha') || '[]'); // เพิ่มข้อมูลใหม่ leaderboard.push({ name: name, score: userScore, total: totalQ }); // เรียงลำดับจากคะแนนมากไปน้อย leaderboard.sort((a, b) => b.score - a.score); // ตัดให้เหลือแค่ 10 อันดับแรก if (leaderboard.length > 10) { leaderboard = leaderboard.slice(0, 10); } // บันทึกลง LocalStorage localStorage.setItem('wp_quiz_lb_p1_alpha', JSON.stringify(leaderboard)); // แสดงผลลงในตาราง HTML 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 Alphabets & Numbers (20 ข้อ)

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

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

Related

Authain

Read Next

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

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

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

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

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

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

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

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

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

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

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

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

Related

Authain

Read Next

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

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

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

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

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

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

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

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

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

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

นายอุเทน กาญวิจิตร รับโล่รางวัลกรรมการและเลขานุการคณะกรรมการสถานศึกษาดีเด่น วันที่ 30 เมษายน 2569

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