반응형
2021.02.28 - [웹] - 간단한 OX 퀴즈 웹페이지 만들기 - 하나 Web HTML JavaScript
간단한 OX 퀴즈 웹페이지 만들기 - 하나 Web HTML JavaScript
모지Lee 입니다. 이건 제가 만든 웹페이지 입니다. https://playzapangi.netlify.app/ Play 자판기 심심풀이 테스트가 한 곳에!! 별도의 회원가입 필요없이 그냥 즐기면 OK playzapangi.netlify.app 간단한 OX..
mojilee.tistory.com
이건 제가 만든 웹페이지입니다.
https://playzapangi.netlify.app/
Play 자판기
심심풀이 테스트가 한 곳에!! 별도의 회원가입 필요없이 그냥 즐기면 OK
playzapangi.netlify.app
영역을 4개로 나누고 각각 세부 사항을 디자인하고 기능을 추가하도록 하겠습니다.
(사용한 이미지는 글 하단에 첨부하였습니다.)
- 문제 번호 영역 : 각 문제의 번호가 증가함을 보여줍니다.
- 문제 영역 : 저는 이미지를 활용해서 사용자가 OX 중 하나를 선택하면 바로 다음 문제(이미지)가 나오도록 설정하였습니다. 이미지를 사용하지 않고 텍스트로 작성해도 됩니다.
- 보기 영역 : OX 버튼이 위치합니다. 클릭을 통해 다음 문제로 넘어가도록 기능을 설정하고, 모든 문제를 다 풀었을 시 결과 보기 버튼이 활성화되도록 하였습니다.
- 광고 영역 : 카카오 애드핏을 활용하였습니다.
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 >
반응형
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="style.css">
<!-- sweetalert2 -->
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
</head>
<body>
<!-- 번호 영역 -->
<div class="number" id="number_id">
</div>
<!-- 문제 영역 -->
<div class="problem" id="problem_id">
</div>
<!-- 보기 영역 -->
<div class="answer" id="answer_id">
</div>
<!-- 광고 영역 -->
<div class="admin">
</div>
<!-- 기능 영역 -->
<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();
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>";
}
}
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
})
}
</script>
</body>
</html>< index.html >
| number_id, problem_id, answer_id | body 영역에서 선언한 각 Div id값 |
| problem_arr | 문제 이미지 배열 |
| answer_arr | 정답 배열 |
| selectAnswer | 사용자가 선택한 답 |
| score | 총 점수 |
| imgNum | 이미지 번호 |
| startNum, endNum | 시작과 끝을 비교하기 위한 변수 |
| init() | 각 변수에 대한 초기화 함수 |
| setProblem() | 각 문제에 대한 이미지와 정답 설정 함수 |
| 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) | 현재 웹페이지를 새로 고침하는 함수 |
| btnOFunc() | O 버튼을 눌렀을 때 함수 |
| btnXFunc() | X 버튼을 눌렀을 때 함수 |
| btnResFunc() | 결과 보기 버튼을 눌렀을 때 함수 |
4개의 영역에 대한 기본적인 html 파일과 css파일을 작성하였습니다.
정답과 일치했을 때는 score에 1을 더해주고, 새로운 문제를 세팅해주는 setProblem() 함수를 불러옵니다.
html. Javascript, css 코드 작성이 아래 그림처럼 완료되었습니다.
!! sweetalert2 라이브러리가 확인해보니 익스플로어11에서 작동을 하질 않네요 ㅠ.,ㅠ
!! 크롬 브라우저에서 테스트 해보시는걸 추천 드려요!!
구름 IDE 에서 이미지 파일 추가
새폴더 만들고 사용할 이미지를 끌어다가 폴더에 올려놓으면 바로 추가됩니다.
반응형
댓글