반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>색깔 맞추기 게임</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #fffbf0;
text-align: center;
padding: 20px;
}
.quiz-box {
background-color: #ffffff;
border: 3px solid #4CAF50;
border-radius: 15px;
padding: 30px;
width: 60%;
margin: 0 auto;
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.1);
}
h1 {
color: #4CAF50;
}
.button-container {
margin-top: 20px;
}
button {
background-color: #4CAF50;
color: #ffffff;
border: none;
border-radius: 8px;
padding: 10px 20px;
margin: 5px;
cursor: pointer;
font-size: 18px;
}
button:hover {
background-color: #45a049;
}
#result {
font-size: 20px;
margin-top: 15px;
color: #333;
}
</style>
</head>
<body>
<h1>🎨 색깔 맞추기 게임 🎯</h1>
<div class="quiz-box">
<h2>🟠 주황색을 찾아보세요!</h2>
<div class="button-container">
// 여기에 버튼을 만드는 코드를 작성해주세요!
</div>
<p id="result"></p>
</div>
<script>
function checkAnswer(color) {
const result = document.getElementById('result');
if (color === '주황') {
result.innerHTML = '🎉 정답입니다! 잘했어요! 🎉';
result.style.color = '#FF8C00'; // 주황색
} else {
result.innerHTML = '❌ 틀렸어요. 다시 시도해 보세요!';
result.style.color = '#FF0000'; // 빨간색
}
}
</script>
</body>
</html>
[예시 만들기3]
이번에는 숫자 3을 찾는 버튼을 만들어볼게요!
1,3,5,7의 버튼이 있고 버튼을 눌렀을때 정답을 채점할거예요!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>숫자 맞추기 게임</title>
<style>
body { text-align: center; font-family: Arial, sans-serif; background-color: #e0f7fa; }
.game-box { background-color: #ffffff; border: 3px solid #00796b; border-radius: 15px; padding: 20px; width: 60%; margin: 0 auto; }
button { background-color: #00796b; color: #fff; border: none; padding: 10px 20px; margin: 5px; cursor: pointer; border-radius: 8px; }
#result { margin-top: 15px; font-size: 20px; }
</style>
</head>
<body>
<h1>🔢 숫자 맞추기 게임 🔢</h1>
<div class="game-box">
<h2>3️⃣ 숫자 **3**을 찾아보세요!</h2>
//여기에 1,3,5,7을 클릭하는 버튼을 만들어주세요!
<p id="result"></p>
</div>
<script>
function checkNumber(num) {
const result = document.getElementById('result');
if (num === 3) {
result.innerHTML = '🎯 정답입니다! 잘했어요!';
result.style.color = '#4CAF50';
} else {
result.innerHTML = '❌ 틀렸어요. 다시 시도해 보세요!';
result.style.color = '#D32F2F';
}
}
</script>
</body>
</html>
[예시만들기4]
이번에는 멍멍소리를 내는 동물을 찾아보세요!
고양이, 강아지, 소, 닭의 버튼이 있고 버튼을 눌렀을때 정답을 채점할거예요!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>동물 소리 맞추기</title>
<style>
body { text-align: center; font-family: Arial, sans-serif; background-color: #fff3e0; }
.game-box { background-color: #ffffff; border: 3px solid #FF9800; border-radius: 15px; padding: 20px; width: 60%; margin: 0 auto; }
button { background-color: #FF9800; color: #fff; border: none; padding: 10px 20px; margin: 5px; cursor: pointer; border-radius: 8px; }
#result { margin-top: 15px; font-size: 20px; }
</style>
</head>
<body>
<h1>🐾 동물 소리 맞추기 🐾</h1>
<div class="game-box">
<h2>🔊 "**멍멍**" 소리를 내는 동물은?</h2>
//여기에 고양이,강아지, 소, 닭을 클릭할 수 있는 버튼을 만들어주세요!
<p id="result"></p>
</div>
<script>
function checkSound(animal) {
const result = document.getElementById('result');
if (animal === '강아지') {
result.innerHTML = '🎉 정답입니다! 강아지는 "멍멍" 하고 짖어요!';
result.style.color = '#4CAF50';
} else {
result.innerHTML = '❌ 틀렸어요. 다시 생각해 보세요!';
result.style.color = '#D32F2F';
}
}
</script>
</body>
</html>
'웹사이트 만들기' 카테고리의 다른 글
| 자기소개 만들기 (0) | 2025.03.26 |
|---|---|
| [4차시]리스트 만들기 (0) | 2025.03.16 |
| [2차시] html에 글자 나타내기 (0) | 2025.02.11 |
| [1차시] html 실행하기 (0) | 2025.02.11 |
| 웹 사이트 만들기 전 반드시 해야 할 것 (0) | 2025.02.11 |
