간단한 OX 퀴즈 웹페이지 만들기 - 세엣 Web HTML JavaScript

모지Lee 입니다.

---

이건 제가 만든 웹페이지 입니다.
https://playzapangi.netlify.app/

Play 자판기

 

간단한 OX퀴즈를 변형해서 만들어 보았어요!!
https://playzapangi.netlify.app/abbreviationtest/abbreviation

Play 자판기 [신조어 테스트]

https://playzapangi.netlify.app/cleantest/cleanscore

Play 자판기 [청결도 테스트]

---

이번에는 자바스크립트 코드를 완성하도록 하겠습니다.

(사용한 이미지는 글 하단에 첨부하였습니다.)

 

<!-- 기능 영역 -->
<script>
	var number_id, problem_id, answer_id;
	var problem_arr = ['q1.png', 'q2.png', 'q3.png', 'q4.png', 'q5.png', 'qres.png'];
	var answer_arr = ['O', 'X', 'X', 'O', 'O'];

	var selectAnswer, score;
	var imgNum, startNum, endNum;

	function init(){
		number_id = document.getElementById("number_id");
		problem_id = document.getElementById("problem_id");
		answer_id = document.getElementById("answer_id");

		startNum = 0;
		endNum = 5;
		score = 0;

		setProblem();
	}
    
	init();
</script>

< index.html >

 

number_id, problem_id, answer_id	body 영역에서 선언한 각 Div id값
problem_arr	문제 이미지 배열
answer_arr	정답 배열
selectAnswer	사용자가 선택한 답
score	총 점수
imgNum	이미지 번호
startNum, endNum	시작과 끝을 비교하기 위한 변수

 

init()	각 변수에 대한 초기화 함수
setProblem()	각 문제에 대한 이미지와 정답 설정 함수

 

아래 함수 들은 <script></script> 사이에 init(); 뒤에 추가해주시면 됩니다.

function setProblem(){
	problem_id.innerHTML = "<img src='./img/" + problem_arr[startNum] + "' class='problem_img'>";

	if(startNum == endNum){
		number_id.innerHTML = "<span class='label'>< 결과보기 ></span>";
		answer_id.innerHTML = "<button type='button' class='button res' onclick='btnResFunc();'>
        결과보기</button><button type='button' class='button restart' onclick='history.go(0);'>
        다시하기</button>";
	} else {
		number_id.innerHTML = "<span class='label'>< " + parseInt(startNum + 1) + " ></span>";
		answer_id.innerHTML = "<button type='button' class='button o' onclick='btnOFunc();'>
        O</button><button type='button' class='button x' onclick='btnXFunc();'>X</button>";
	}
}

< index.html >

 

problem_id.innerHTML	img 폴더에 저장되어 있는 이미지를 배열의 순서대로 problem_id의 Div태그에 삽입
number_id.innerHTML	number_id의 Div태그에 현재 문제 번호 텍스트 출력    parseInt(startNum + 1) => startNum의 초기값을 0으로 했기 때문에 1을 더해주는데 이 문자열을 정수로 바꿔주기 위해 parseInt() 함수 사용
answer_id.innerHTML	answer_id의 Div태그에는 유동적으로 O/X 버튼과 결과보기/다시하기 버튼이 생성 되도록 함
if(startNum == endNum)	시작번호와 끝 번호가 같다면 모든 문제를 다 푼 것이기 때문에 number_id의 Div태그에 번호 대신에 결과보기 텍스트 출력
history.go(0)	현재 웹페이지를 새로 고침하는 함수

 

function btnOFunc(){
	selectAnswer = "O";
	if(answer_arr[startNum] == selectAnswer){
		score++;
	}
	startNum++;
	setProblem();
}

function btnXFunc(){
	selectAnswer = "X";
	if(answer_arr[startNum] == selectAnswer){
		score++;
	}
	startNum++;
	setProblem();
}

function btnResFunc(){
    Swal.fire({
        title: '',
        text: '',
        html: "<b>당신의 점수는 " + score + "점입니다.</b>",
        icon: 'success',
        confirmButtonColor: '#d33',
        confirmButtonText: '닫기',
        allowOutsideClick: false
    })
}

< index.html >

 

btnOFunc()	O 버튼을 눌렀을 때 함수
btnXFunc()	X 버튼을 눌렀을 때 함수
btnResFunc()	결과 보기 버튼을 눌렀을 때 함수

 

반응형

정답과 일치했을 때는 score에 1을 더해주고, 새로운 문제를 세팅해주는 setProblem() 함수를 불러옵니다.

자바스크립트 코드는 작성 완료하였고, 아래는 CSS 코드입니다.

 

body {
	background-color: #fce3c2;
}

.number {
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
}

.label {
	font-size: 150%;
	font-weight: bold;
}

.problem {
	text-align: center;
	margin-bottom: 30px;
}

.problem_img {
	width: 300px;
	height: 300px;
	object-fit: cover;
}

.answer {
	text-align: center;
}

.button.o {
	width: 100px;
	color: #ffffff;
	background: #f88379;
	border: 2px solid #ffffff;
	padding: 10px;
	border-radius: 5px;
	margin-right: 10px;
}

.button.o:hover {
	background: #e63a00;
	color: #ffffff;
	cursor: pointer;
}

.button.o:active {
	background: #e63a00;
	color: #ffffff;
}

.button.o:focus {
	background-color: #e63a00;
	outline:0;
}

.button.x {
	width: 100px;
	color: #ffffff;
	background: #f88379;
	border: 2px solid #ffffff;
	padding: 10px;
	border-radius: 5px;
	margin-left: 10px;
}

.button.x:hover {
	background: #e63a00;
	color: #ffffff;
	cursor: pointer;
}

.button.x:active {
	background: #e63a00;
	color: #ffffff;
}

.button.x:focus {
	background-color: #e63a00;
	outline:0;
}

.button.res {
	width: 150px;
	color: #ffffff;
	background: #79aff8;
	border: 2px solid #ffffff;
	padding: 10px;
	border-radius: 5px;
	margin-right: 10px;
}

.button.res:hover {
	background: #3084f4;
	color: #ffffff;
	cursor: pointer;
}

.button.res:active {
	background: #3084f4;
	color: #ffffff;
}

.button.res:focus {
	background-color: #3084f4;
	outline:0;
}

.button.restart {
	width: 150px;
	color: #ffffff;
	background: #f88379;
	border: 2px solid #ffffff;
	padding: 10px;
	border-radius: 5px;
	margin-left: 10px;
}

.button.restart:hover {
	background: #e63a00;
	color: #ffffff;
	cursor: pointer;
}

.button.restart:active {
	background: #e63a00;
	color: #ffffff;
}

.button.restart:focus {
	background-color: #e63a00;
	outline:0;
}

.admin {
	width: 320px;
	margin: 0 auto;
	margin-top: 20px;
}

< style.css >

 

html. Javascript, css 코드 작성이 아래 그림처럼 완료되었습니다.

 

!! sweetalert2 라이브러리가 확인해보니 익스플로어11에서 작동을 하질 않네요 ㅠ.,ㅠ

!! 크롬 브라우저에서 테스트 해보시는걸 추천 드려요!!

 

 

해 놓고 나니 엄청 허접하네요 ㅠ y ㅠ

그래도 어쩔 수 없습니다. 전 모지Lee니깐요...

다음 글에는 하단에 카카오 광고를 삽입하는 내용을 다룰까 합니다.

 

그럼 뿅~~~

 

간단한 OX 퀴즈 웹페이지 만들기 통합버전(모든 코드 통합)

html, js, css 파일 하나로 모아서 작성을 하였습니다.

---

2022.06.20 - [웹] - 간단한 OX 퀴즈 웹페이지 만들기 - 통합 Web HTML JavaScript

간단한 OX 퀴즈 웹페이지 만들기 - 통합 Web HTML JavaScript

---

문제 이미지.zip

0.25MB