Skip to content
조회 수 62633 추천 수 0 댓글 1
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

지정한 이미지파일명을 출력 시키는 시험문제풀이

아래의 조건대로 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>

 

 

 

 

로그인 후 댓글쓰기가 가능합니다.

?

List of Articles
번호 분류 제목 날짜 조회 수
917 컴퓨터잡담 윈도우 10 절전모드(슬립모드) 예약해제 방법 secret 2021.07.28 499
916 Server PHP 가속기 secret 2016.03.05 540
915 컴퓨터잡담 서버 다운 원인 2015.12.10 558
914 Server Server 성능 테스트 secret 2016.11.30 585
913 컴퓨터잡담 ACTIVE-X 의 무서움 file 2015.12.26 669
912 컴퓨터잡담 Sitemap.xml 만들어 주는 사이트 file 2016.01.23 691
911 컴퓨터잡담 크롬 속도올리기 2015.01.24 807
910 컴퓨터잡담 박지성 맨유시절 호날두와의 호흡경기 모음(유니세프 친선경기) 2015.11.13 827
909 컴퓨터잡담 도스 배치파일로 원격지 컴퓨터 모니터링 2015.11.13 833
908 컴퓨터잡담 파이썬(python) 자주 사용하는 명령 모으기 2021.09.03 884
907 컴퓨터잡담 python 문자열에서 모든 공백을 제거 2021.08.31 913
906 컴퓨터잡담 아나콘다에서 모듈을 설치할 때에는? 2021.09.02 941
905 컴퓨터잡담 파이썬 키움증권 open api 스크랩 2021.09.02 970
904 컴퓨터잡담 PC에 안드로이드 설치하기 2015.12.01 992
903 컴퓨터잡담 핑테스트 프로그램 file 2015.09.01 1060
902 컴퓨터잡담 타지역 농지매입 2021.06.01 1108
901 컴퓨터잡담 파이썬 변수값에서 숫자만 추출하기 2021.07.28 1141
900 컴퓨터잡담 [안드로이드] 키캣 4.4 버전 플래시 동영상 안될때 해결방법 file 2015.12.04 1148
899 Server php.ini 파일설정으로 파일업로드 용량늘리기 2015.03.03 1152
898 Server XE ckeditor 모바일에서 사용하기 2015.07.13 1152
Board Pagination Prev 1 2 3 4 5 ... 46 Next
/ 46

http://urin79.com

우린친구블로그

sketchbook5, 스케치북5

sketchbook5, 스케치북5

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소