ChatGPT 3.5 makin cekap. Saya cuba untuk hasilkan satu kuiz Matematik mudah untuk kanak-kanak berumur 4-6 tahun menggunakan HTML, Javascript, CSS dengan bantuan ChatGPT. Ternyata ianya sangat-sangat membantu.
{getToc} $title={Topik Rengking}
Mesra mobile dan desktop
Kuiz Matematik mudah ni sesuai dalam paparan penuh Dekstop dan Mobile. Tapi saya personally suka pada versi mobile. Sebenarnya game ni simple je, tapi boleh melatih kanak-kanak untuk develope skil mengira dengan cara tersendiri.
Melatih pemikiran kreatif untuk penyelesaian masalah
Kanak-kanak yang didedahkan dengan latihan kira-kira dengan kerap, mereka akan mencipta kaedah dan rumus mereka sendiri untuk selesaikan sesuatu masalah. Otak mereka ni kreatif, kita yang dewasa ni pun kadang-kadang tak tahu apa yang mereka fikir.
Ciri-ciri Kuiz Matematik mudah
- Mesra mobile dan desktop,
- Versi web sahaja,
- Mengandungi latihan pengiraan tambah dan tolak yang ringkas,
- Tidak mempunyai timer supaya tidak memberikan tekanan,
- Mempunyai counter bagi setiap soalan yang dijawab dengan betul,
- Soalan akan bertukar 2 saat selepas dijawab dengan betul tanpa perlu tekan butang Next,
- Tidak perlu login, masuk dan terus mula latihan kira-kira.
Klik pada pautan Kuiz Matematik Mudah untuk bermula. {alertSuccess}
Bagi anda yang mempunyai blog, dan ingin meletakkan Kuiz Matematik ini ke dalam blog anda, boleh copy code HTML yang saya sediakan di bawah ini.
Anda hanya perlu tekan butang COPY di bawah ini dan PASTE code yang telah dicopy ke blog anda.
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>Math Quiz for Kids</title>
<style>
/* Your modified CSS styles go here */
.xyz-submit-button {
background-color: #4CAF50; /* Green */
color: white;
}
.xyz-next-button {
background-color: #FF9800; /* Orange */
color: white;
}
body {
background-color: #87CEEB;
}
.xyz-quiz-container {
position: relative; /* Add relative positioning */
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #FFF8DC;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.xyz-question {
font-size: 6vw;
margin-bottom: 15px;
font-weight: bold;
text-align: center;
color: #2E8B57;
}
.xyz-input-container {
position: relative;
text-align: center;
}
.xyz-input {
font-size: 8vw;
font-weight: bold;
text-align: center;
padding: 2vw;
margin: 5px auto;
display: block;
max-width: 100%;
}
.xyz-button {
background-color: #FFD700;
color: #4B0082;
border: none;
padding: 2vw 4vw;
border-radius: 10px;
cursor: pointer;
margin: 5px;
}
/* Positioning for the logo */
.xyz-logo {
position: absolute;
bottom: 10px; /* Adjust as needed */
left: 10px; /* Adjust as needed */
}
.xyz-number-buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.xyz-notification {
font-size: 3vw;
font-weight: bold;
margin-top: 5px;
text-align: center;
color: #DC143C;
}
.xyz-button-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 10px;
}
/* Media query for desktop screens */
@media (min-width: 768px) {
.xyz-quiz-container {
max-width: 600px;
}
.xyz-question {
font-size: 24px;
}
.xyz-input {
font-size: 18px;
padding: 8px;
}
.xyz-button {
padding: 8px 16px;
}
.xyz-notification {
font-size: 18px;
}
.xyz-number-buttons {
grid-template-columns: repeat(3, 1fr);
}
}
/* New styles for desktop mode */
@media (min-width: 768px) {
.xyz-number-buttons {
grid-template-columns: repeat(3, 1fr);
}
}
/* Numpad arrangement for desktop mode */
@media (min-width: 768px) {
.xyz-number-buttons {
grid-template-columns: repeat(3, 1fr);
}
.xyz-button:nth-child(1),
.xyz-button:nth-child(2),
.xyz-button:nth-child(3),
.xyz-button:nth-child(4),
.xyz-button:nth-child(5),
.xyz-button:nth-child(6),
.xyz-button:nth-child(7),
.xyz-button:nth-child(8),
.xyz-button:nth-child(9),
.xyz-button:nth-child(11) {
grid-column: span 1;
}
.xyz-button:nth-child(10) {
grid-column: span 2;
}
}
</style>
</head>
<body>
<div class="xyz-quiz-container">
<h1 class="xyz-question">Math Quiz for Kids</h1>
<p class="xyz-question" id="question">
<span id="question-text"></span>
</p>
<div class="xyz-input-container">
<input class="xyz-input" id="answer" readonly="" type="text" />
<p class="xyz-notification" id="result"></p>
</div>
<div class="xyz-number-buttons" id="number-buttons"></div>
<div class="xyz-button-container">
<button class="xyz-button xyz-submit-button" onclick="checkAnswer()">Submit</button>
<button class="xyz-button xyz-next-button" onclick="nextQuestion()">Next Question</button>
</div>
<!-- New element for question counter -->
<p class="xyz-notification" id="question-counter">Questions answered correctly: <span id="counter">0</span></p>
<!-- Logo with dofollow link -->
<a class="xyz-logo-link" href="https://www.rengking.com">
<img alt="Your Logo" class="xyz-logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoUga4fVzQBbHTaOR9skMOWGhvsZnGOz4UhUVPkBJxVTjvnXC9J8ZXPxYXsXWfS1V1J2kF9FN_F9_40gMplt6bUJaWkS9om3HjGKgmse7u33QW6Ot_5FqmxW2FHj6bpxDPzTQv5v8YMmtct2kObb3Psx0La5Zqg74kK0bollSI0fZdgVoQbsGsn5TgkJzK/s94/logogamekecik.png" />
</a>
</div>
<script>
let currentAnswer = '';
let questionCounter = 0;
function generateQuestion() {
const num1 = Math.floor(Math.random() * 10);
const num2 = Math.floor(Math.random() * (num1 + 1));
const operator = ['+', '-'][Math.floor(Math.random() * 2)];
const question = `${num1} ${operator} ${num2}`;
document.getElementById('question-text').textContent = `${question}=`;
currentAnswer = eval(question).toString(); // Update current answer
document.getElementById('answer').value = '';
document.getElementById('result').textContent = '';
}
function checkAnswer() {
const answerElement = document.getElementById('answer');
const resultElement = document.getElementById('result');
if (currentAnswer === answerElement.value) {
resultElement.textContent = 'Correct! 🎉';
questionCounter++;
document.getElementById('counter').textContent = questionCounter;
currentAnswer = ''; // Reset current answer after answering
setTimeout(function() {
resultElement.textContent = ''; // Clear the result after 0.5 seconds
generateQuestion(); // Move to the next question
}, 500); // Delay of 500 milliseconds (0.5 seconds)
} else {
resultElement.textContent = 'Try again! 😕';
}
}
function handleButtonClick(digit) {
const answerElement = document.getElementById('answer');
const resultElement = document.getElementById('result');
answerElement.value += digit;
resultElement.textContent = '';
}
function createNumberButtons() {
const numberButtonsElement = document.getElementById('number-buttons');
const buttonLayout = [1, 2, 3, 4, 5, 6, 7, 8, 9, '<', 0]; // Sequential arrangement
buttonLayout.forEach((digit) => {
const button = document.createElement('button');
button.textContent = digit;
button.addEventListener('click', () => {
digit === '<' ? backspace() : handleButtonClick(digit);
});
button.classList.add('xyz-button');
numberButtonsElement.appendChild(button);
});
}
function nextQuestion() {
generateQuestion();
}
function backspace() {
const answerElement = document.getElementById('answer');
const currentInput = answerElement.value;
answerElement.value = currentInput.slice(0, -1);
document.getElementById('result').textContent = '';
}
createNumberButtons();
generateQuestion();
</script>
</body>
</html>
Tags:
Pendidikan