지정한 이미지파일명을 출력 시키는 시험문제풀이
아래의 조건대로 html나 자바스크립트 등으로 코딩을 만들 수 있겠어?
시험문제 : *.png
시험문제파일은
예를들어 1-2.png 가 있다고 가정하면
앞자리 1은 시험문제번호이며, "-"뒤의 숫자2는 문제의 정답이다.
현재폴더안에 png 파일을 모두 불러와서 한개씩 랜덤으로 시험문제를 출력한다.
1회차에 전체문제가 고르게 한번씩만 랜덤으로 나오게 하고, 모든문제가 한번씩 다 나왔으면
2회차에서도 전체문제가 고르게 한번씩만 랜덤으로 나오게 하면서 5회차까지 다 나오면
문제풀이는 회차별 점수를 출력하고, 확인을 누르면 종료한다.
단, 해당 회차에는 같은문제가 1회만 출제되어야 해.
다음문제로 넘어갈때 정답 입력하는 곳에 숫자가 초기화가 안되고 그대로 남아 있으면 안돼. 초기화를 부탁해.
화면의 레이아웃은
회차 = 이미지를 처음 불러올 경우 1회차,
모든이미지를 한번씩 다 불러온 뒤부터는 2회차이며 이후 계속 회차가 증가한다.
총문제수 = png 이미지파일의 개수
출제된 문제수 = 회차에 출제된 문제수
남은 문제수 = 회차에 아직 출제되지 않은 문제수
맞춘 문제수 = 출제된 문제수 중 정답을 맞춘 문제수
맞춘 문제수 = 출제된 문제수 중 정답을 틀린 문제수
맨밑의 가운데에 이미지 파일명을 적어줘.
상단 가운데에 [회차] / [총문제수] / [출제된 문제수] / [남은 문제수] / [맞춘 문제수] / [틀린 문제수] 를 표시한다.
화면가운데에 문제 이미지를 출력하고,
이미지 밑에 정답을 입력할수 있고,
옆에 [정답확인] 이라는 버튼을 누르거나 엔터키를 입력하면 정답을 확인할 수 있다.
정답을 맞추면 ok.mp3를 들려주고,
정답을 틀리면 nono.mp3를 들려준다.
정답이 틀린 경우 정답은 [ ]번 입니다. 라는 팝업창이 떳다가 2초뒤에 사라지게 한다.
팝업 배경색상은 #cc6699, 글자색상은 #fffff 글자는 두껍게 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Study</title>
<style>
body {
text-align: center;
margin-top: 50px;
}
#header {
margin-bottom: 20px;
}
#question-container {
margin-top: 50px;
}
#image-name {
margin-top: 20px;
}
/* Added styles for the popup */
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #cc6699; /* Background color */
padding: 10px;
border: 1px solid #000;
color: #ffffff; /* Text color */
font-weight: bold; /* Font weight */
}
</style>
</head>
<body>
<div id="header">
<p id="status"></p>
</div>
<div id="question-container">
<img id="question-image" alt="Question Image">
<br>
<input type="text" id="answer-input" placeholder="정답을 입력하세요" onkeydown="if (event.key === 'Enter') checkAnswer()">
<button onclick="checkAnswer()">정답확인</button>
</div>
<div id="image-name"></div>
<script>
let rounds = 1;
let totalQuestions = 0;
let answeredQuestions = 0;
let correctAnswers = 0;
let incorrectAnswers = 0;
let remainingQuestions = [];
function loadQuestions() {
const imgExtensions = ['png', 'jpg', 'jpeg', 'gif'];
// Load all image files in the current folder
const imagesFolder = '';
const imgFiles = ['1-3.png', '2-1.png', '3-3.png', '4-4.png', '5-5.png', '6-2.png', '7-3.png'];
// Shuffle the array to get a random order for each round
imgFiles.sort(() => Math.random() - 0.5);
for (let i = 0; i < imgFiles.length; i++) {
remainingQuestions.push(imgFiles[i]);
}
totalQuestions = remainingQuestions.length;
}
function getNextQuestion() {
if (remainingQuestions.length === 0) {
endQuiz();
return;
}
const currentQuestion = remainingQuestions.pop();
document.getElementById('question-image').src = currentQuestion;
document.getElementById('image-name').innerText = `이미지 파일명: ${currentQuestion}`;
document.getElementById('answer-input').value = ''; // Clear the answer input
answeredQuestions++;
updateStatus();
}
function checkAnswer() {
const userAnswer = document.getElementById('answer-input').value;
const correctAnswer = document.getElementById('question-image').src.split('-')[1].split('.')[0];
if (userAnswer === correctAnswer) {
playAudio('ok.mp3');
correctAnswers++;
} else {
playAudio('nono.mp3');
incorrectAnswers++;
showCorrectAnswer(correctAnswer);
}
updateStatus();
getNextQuestion();
}
function playAudio(audioFile) {
const audio = new Audio(audioFile);
audio.play();
}
function updateStatus() {
document.getElementById('status').innerText = `회차: ${rounds} / 총문제수: ${totalQuestions} / 출제된 문제수: ${answeredQuestions} / 남은 문제수: ${totalQuestions - answeredQuestions} / 맞춘 문제수: ${correctAnswers} / 틀린 문제수: ${incorrectAnswers}`;
}
function endQuiz() {
alert(`회차별 점수\n맞춘 문제수: ${correctAnswers}\n틀린 문제수: ${incorrectAnswers}`);
rounds++;
answeredQuestions = 0;
correctAnswers = 0;
incorrectAnswers = 0;
// Reset questions for the next round
remainingQuestions = [];
loadQuestions();
getNextQuestion();
}
function showCorrectAnswer(correctAnswer) {
const popup = document.createElement('div');
popup.className = 'popup'; // Add the popup class
popup.innerText = `정답은 [${correctAnswer}]번 입니다.`;
document.body.appendChild(popup);
setTimeout(() => {
document.body.removeChild(popup);
}, 1000);
}
// Initialize the quiz
loadQuestions();
updateStatus();
getNextQuestion();
</script>
</body>
</html>
