<코딩 자격증 없이 퀴즈앱을 만들자 1편>
나는 C언어를 잠시 배우다가 배열전에 그만두고, 풀타임 알바를 때려치면서 코딩 독학을 시작했다.
유튜브 생활코딩 egoing 선생님의 강의를 들으며 HTML, CSS, JavaScript를 조금 알게 되었다.
물론, 말로 설명해 보라고 하면 못한다..
아, 이런거구나.. 하는정도? 그렇게 강의를 듣고 살짝 이해하고, 잊어버리면 다시 듣고 다른 사람이 만드는거 따라해보고 하는 정도다.
가끔 아는게 나오면 엄청 반가운.. 크..
생활코딩
일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다. 채널 공개키 : MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDbU/jgeYLWbmUB5pk/wlqMs+2qsOOPgN2ydxOsrWe8JJUXzj5ovsUmjfBSwLjajT6SyO00ulne3zja2PzEZC2wnJCgvZ6lr/ZLvA9yUqmrKRNa
www.youtube.com
✪ egoing 선생님은 코딩계의 신적인 존재이시다. 무조건 들어야되는 수업 ✪
현재 Node.js 강의를 듣고 있는데 굉장히 초반이다.
콜백이 나왔는데 뭔지 아직 모르겠다.
이런 나에게 미션이 주어졌다.
개집사 넘버1은 영어, 스페인어 과외선생이다.
학생들에게 문제를 내고 싶은데 내가 코딩을 공부하니 온라인 퀴즈앱을 하나 만들어 달라는 것이었다.
헐 ...
재빠르게 유튜브를 뒤졌다.
비슷한거 따라하면서 이렇게 저렇게 고치면 될 수도 있지 않을까 싶었다.
그렇게 찾아낸 영상이 이것이다.
이걸 따라 만들긴 했는데 응용하는게 문제였다.
넘버1은 온라인 퀴즈앱 영어, 스페인어 버전을 초보자, 중급자 레벨로 다르게 내고 싶다는데 이 영상에서는 하나의 레벨에 퀴즈를 쭉 이어나가야했다.
후반부에 restart 버튼을 누르면 문제를 다시 풀게끔 나와야 하는데 CodingNepal 님께서 그 부분을 누락하신 듯 하다..
영상 안에서는 답을 찾을 수 없었다..
댓글을 보면 나와 같은 질문을 하는 외국인도 있었다.
그래서 나는 이렇게 해봤다.
Quiz App index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<title>타이틀 입력</title>
<!-- FontAwesome CDN Link for Icons -->
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/be98661673.js" crossorigin="anonymous"></script>
<!-- fontawesome 사이트 가입 -->
</head>
<body>
<!-- start quiz button -->
<div class="start_btns">
<div class="start_btn1"><a href="1.html"><button>Beginner</button></a></div>
<div class="start_btn2"><a href="2.html"><button>Intermediate</button></a></div>
</div>
</body>
</html>
1.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<title>타이틀 입력</title>
<!-- FontAwesome CDN Link for Icons -->
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/be98661673.js" crossorigin="anonymous"></script>
<!-- fontawesome 사이트 가입 -->
</head>
<body>
<!-- start quiz button -->
<div class="start_btns">
<div class="start_btn1"><button>LEVEL 1</button></div>
</div>
<!-- info box -->
<div class="info_box">
<div class="info_title">
<span>Some Rules of this Quiz</span>
</div>
<div class="info_list">
<div class="info">1. Lorem ipsum dolor sit amet <span>consectetur</span> adipisicing elit.</div>
<div class="info">2. Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="info">3. Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="info">4. Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="info">5. Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
</div>
<div class="buttons">
<button class="quit">Exit Quiz</button>
<button class="restart">Continue</button>
<!-- <button class="restart2">Continue2</button> -->
</div>
</div>
<!-- quiz box -->
<div class="quiz_box">
<header>
<div class="title">Spanish Quiz Application</div>
<div class="timer">
<div class="time_text">Time Left</div>
<div class="timer_sec">15</div>
</div>
<div class="time_line"></div>
</header>
<section>
<div class="que_text">
<!-- <span>What is your name?</span> -->
</div>
<div class="option_list">
<!-- <div class="option">
<span>Lorem, ipsum dolor.</span>
<div class="icon tick"><i class="fas fa-check"></i></div>
</div>
<div class="option">
<span>Lorem, ipsum dolor.</span>
<div class="icon cross"><i class="fas fa-times"></i></div>
</div>
<div class="option">
<span>Lorem, ipsum dolor.</span>
</div>
<div class="option">
<span>Lorem, ipsum dolor.</span>
</div> -->
</div>
</section>
<!-- quiz box footer -->
<footer>
<div class="total_que">
<!-- <span><p>2</p>of<p>5</p>Questions</span> -->
</div>
<button class="next_btn">Next Que</button>
</footer>
</div>
<!-- result box -->
<div class="result_box">
<div class="icon">
<i class="fas fa-crown"></i>
</div>
<div class="complete_text">Yoe've completed the Quiz!</div>
<div class="score_text">
<!-- <span>and sorry, You got only <p>2</p> out of <p>5</p></span> -->
</div>
<div class="buttons">
<button class="restart">Replay Quiz</button>
<button class="quit">Quit Quiz</button>
</div>
</div>
<script src="js/questions.js"></script>
<script src="js/script.js"></script>
</body>
</html>
2.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<title>타이틀 입력</title>
<!-- FontAwesome CDN Link for Icons -->
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/be98661673.js" crossorigin="anonymous"></script>
<!-- fontawesome 사이트 가입 -->
</head>
<body>
<!-- start quiz button -->
<div class="start_btns">
<div class="start_btn1"><button>LEVEL 2</button></div>
</div>
<!-- info box -->
<div class="info_box">
<div class="info_title">
<span>Some Rules of this Quiz</span>
</div>
<div class="info_list">
<div class="info">1. Lorem ipsum dolor sit amet <span>consectetur</span> adipisicing elit.</div>
<div class="info">2. Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="info">3. Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="info">4. Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="info">5. Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
</div>
<div class="buttons">
<button class="quit">Exit Quiz</button>
<button class="restart">Continue</button>
<!-- <button class="restart2">Continue2</button> -->
</div>
</div>
<!-- quiz box -->
<div class="quiz_box">
<header>
<div class="title">Spanish Quiz Application</div>
<div class="timer">
<div class="time_text">Time Left</div>
<div class="timer_sec">15</div>
</div>
<div class="time_line"></div>
</header>
<section>
<div class="que_text">
<!-- <span>What is your name?</span> -->
</div>
<div class="option_list">
<!-- <div class="option">
<span>Lorem, ipsum dolor.</span>
<div class="icon tick"><i class="fas fa-check"></i></div>
</div>
<div class="option">
<span>Lorem, ipsum dolor.</span>
<div class="icon cross"><i class="fas fa-times"></i></div>
</div>
<div class="option">
<span>Lorem, ipsum dolor.</span>
</div>
<div class="option">
<span>Lorem, ipsum dolor.</span>
</div> -->
</div>
</section>
<!-- quiz box footer -->
<footer>
<div class="total_que">
<!-- <span><p>2</p>of<p>5</p>Questions</span> -->
</div>
<button class="next_btn">Next Que</button>
</footer>
</div>
<!-- result box -->
<div class="result_box">
<div class="icon">
<i class="fas fa-crown"></i>
</div>
<div class="complete_text">Yoe've completed the Quiz!</div>
<div class="score_text">
<!-- <span>and sorry, You got only <p>2</p> out of <p>5</p></span> -->
</div>
<div class="buttons">
<button class="restart">Replay Quiz</button>
<button class="quit">Quit Quiz</button>
</div>
</div>
<script src="js/questions2.js"></script>
<script src="js/script.js"></script>
</body>
</html>
style.css
/* importing google fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: #0984e3;
}
.info_box,
.quiz_box,
.result_box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow:0px 4px 8px 0 rgba(0,0,0,0.2),
0px 6px 20px 0 rgba(0,0,0,0.19);
transition:all 0.3s ease;
}
.start_btns{
position:absolute;
/* display:inline-block; */
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
.start_btn1, .start_btn2{
box-shadow:0px 4px 8px 0 rgba(0,0,0,0.2),
0px 6px 20px 0 rgba(0,0,0,0.19);
transition:all 0.3s ease;
margin:30px;
}
.info_box.activeInfo,
.quiz_box.activeQuiz,
.result_box.activeResult{
z-index: 5;
opacity: 1;
pointer-events: auto;
transform:translate(-50%, -50%) scale(1);
}
/* start quiz button styling */
.start_btn1 button,
.start_btn2 button{
font-size: 25px;
font-weight: 500;
width:100%;
color: #0984e3;
/* margin:30px; */
padding: 15px 30px;
/* outline: 5px solid gray; */
outline: none;
/* border: 20px solid red; */
border: none;
border-radius: 5px;
background: #fff;
cursor: pointer;
}
.info_box{
width: 640px;
background: #fff;
border-radius: 5px;
opacity: 0;
pointer-events: none;
transform:translate(-50%, -50%) scale(0.9);
}
.info_box .info_title{
height: 60px;
width: 100%;
border-bottom: 1px solid lightgrey;
display: flex;
align-items: center;
/* justify-content: center; */
padding: 0px 30px;
font-size: 20px;
font-weight: 600;
}
.info_box .info_list{
padding: 15px 35px;
}
.info_box .info_list .info{
margin: 5px 0;
font-size: 17px;
}
.info_box .info_list .info span{
font-weight: 600;
color: #0984e3;
}
.info_box .buttons{
height:60px;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 35px;
border-top: 1px solid lightgrey;
}
.info_box .buttons button{
margin: 0 5px;
height: 40px;
width: 100px;
outline: none;
border: 1px solid #0984e3;
border-radius: 5px;
color: #fff;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
/* button quit 같은 위치 붙여쓰기 */
.buttons button.restart{
color: #fff;
background: #0984e3;
}
.buttons button.restart:hover{
background: #0770c0;
}
.buttons button.quit{
color: #0984e3;
border-color: #0984e3;
}
.buttons button.quit:hover{
color: #fff;
background: #0984e3;
}
.quiz_box{
width: 650px;
background: #fff;
border-radius: 5px;
opacity: 0;
pointer-events: none;
transform:translate(-50%, -50%) scale(0.9);
}
.quiz_box header{
position:relative;
z-index: 99;
height: 70px;
padding: 0 30px;
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 5px 5px 0 0;
box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.1);
}
.quiz_box header .title{
font-size: 20px;
font-weight: 600;
}
.quiz_box header .timer{
display:flex;
align-items:center;
justify-content: space-between;
width: 145px;
height: 45px;
background: #cce5ff;
border: 1px solid #b8daff;
border-radius: 5px;
padding: 0 8px;
}
.quiz_box header .timer .time_text{
font-weight: 400;
font-size: 17px;
user-select:none;
/* 글자 선택 안됨 text 글자선택 가능 */
}
.quiz_box header .timer .timer_sec{
font-size: 18px;
font-weight: 500;
background: #5d5f5f;
height: 30px;
width: 45px;
color: #fff;
text-align: center;
line-height: 32px;
border-radius: 5px;
border:1px solid #5d5f5f;
user-select: none;
}
.quiz_box header .time_line{
position: absolute;
bottom: 0px;
left: 0px;
height: 3px;
background: #0984e3;
}
.quiz_box section{
padding: 25px 30px 20px 30px;
background:#fff;
}
.quiz_box section .que_text{
font-size: 25px;
font-weight: 600;
}
.quiz_box section .option_list{
padding: 20px 0;
display: block;
}
section .option_list .option{
background: aliceblue;
border: 1px solid #84c5fe;
border-radius: 5px;
padding: 8px 15px;
margin-bottom:15px;
font-size:17px;
display:flex;
align-items: center;
justify-content: space-between;
cursor:pointer;
transition: all 0.3s ease;
}
section .option_list .option:hover{
color: #004085;
background: #cce5ff;
border-color: #b8daff;
}
/* :nth-last-child() */
.option_list .option:last-child{
margin-bottom: 0px;
}
.option_list .option .icon{
height: 26px;
width:26px;
border:2px solid transparent;
border-radius: 50%;
text-align:center;
font-size: 13px;
line-height: 24px;
pointer-events:none;
}
.option_list .option .icon.tick{
color: #23903c;
border-color:#23903c;
background:#d4edda;
}
.option_list .option .icon.cross{
color: #a42834;
background:#f8d7da;
border-color:#a42834;
}
.option_list .option.correct{
color: #155724;
border-color:#d4edda;
background:#c3e6cb;
}
.option_list .option.incorrect{
color: #721c24;
border-color:#f8d7da;
background:#f5c6cb;
}
.option_list .option.disabled{
pointer-events: none;
}
.quiz_box footer{
height: 60px;
width: 100%;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
.quiz_box footer .total_que span{
display: flex;
user-select: none;
}
footer .total_que span p{
font-weight: 500;
padding: 0 5px;
}
.total_que span p:first-child{
padding-left: 0px;
}
footer .next_btn{
display: none;
height:40px;
padding: 0 13px;
font-size:18px;
font-weight: 400;
border: none;
outline: none;
color:#fff;
background:#0984e3;
border-radius: 5px;
border: 1px solid #0984e3;
cursor:pointer;
transition:all 0.3s ease;
}
footer .next_btn:hover{
background:#0770c0;
}
.result_box{
background:#fff;
width:450px;
padding: 25px 30px;
border-radius:5px;
display:flex;
text-align: center;
align-items: center;
flex-direction:column;
justify-content:space-between;
opacity: 0;
pointer-events: none;
transform:translate(-50%, -50%) scale(0.9);
}
.result_box .icon{
font-size: 100px;
color:#0984e3;
margin-bottom: 10px;
}
.result_box .complete_text{
font-size: 20px;
font-weight: 500;
}
.result_box .score_text span{
display:flex;
margin: 10px 0;
font-size:18px;
font-weight:500;
}
.score_text span p{
font-weight: 600;
padding: 0 4px;
}
.result_box .buttons{
display:flex;
margin: 20px 0;
}
.result_box .buttons button{
margin: 0 10px;
height: 45px;
padding: 0 20px;
border:none;
outline:none;
font-size:18px;
font-weight: 500;
border-radius:5px;
border:1px solid #0984e3;
cursor:pointer;
transition:all 0.3s ease;
}
JavaScript는 js폴더를 만들고 그 안에 js파일을 넣었다.
questions.js
//creating an array and passing the number, questions, options, and answers
let questions = [
{
numb: 1,
question: "What is your name1?",
answer: "hodu",
options: [
"ninjin",
"yeojeee",
"yeojin",
"hodu"
]
},
{
numb: 2,
question: "What is your name2?",
answer: "hodululu",
options: [
"ninjin",
"yeojeee",
"yeojin",
"hodululu"
]
},
{
numb: 3,
question: "What is your name3?",
answer: "min",
options: [
"ninjin",
"yeojeee",
"yeojin",
"min"
]
},
{
numb: 4,
question: "What is your name4?",
answer: "hoho",
options: [
"ninjin",
"yeojeee",
"yeojin",
"hoho"
]
},
{
numb: 5,
question: "What is your name5?",
answer: "haha",
options: [
"ninjin",
"yeojeee",
"yeojin",
"haha"
]
}
]
questions2.js
//creating an array and passing the number, questions, options, and answers
let questions = [
{
numb: 1,
question: "Whaaaaaat is your name1?",
answer: "ninjin",
options: [
"ninjin",
"yeojeee",
"yeojin",
"hodu"
]
},
{
numb: 2,
question: "Whaaaaaaaat is your name2?",
answer: "ninjin",
options: [
"ninjin",
"yeojeee",
"yeojin",
"hodululu"
]
},
{
numb: 3,
question: "Whaaaaaaat is your name3?",
answer: "ninjin",
options: [
"ninjin",
"yeojeee",
"yeojin",
"min"
]
},
{
numb: 4,
question: "Whaaaaaaaaat is your name4?",
answer: "ninjin",
options: [
"ninjin",
"yeojeee",
"yeojin",
"hoho"
]
},
{
numb: 5,
question: "Whaaaaaaaaaat is your name5?",
answer: "ninjin",
options: [
"ninjin",
"yeojeee",
"yeojin",
"haha"
]
}
]
script.js
// getting all required elements
const start_btn1 = document.querySelector(".start_btn1 button");
const info_box = document.querySelector(".info_box");
const exit_btn = info_box.querySelector(".buttons .quit");
const continue_btn = info_box.querySelector(".buttons .restart");
const quiz_box = document.querySelector(".quiz_box");
const option_list = document.querySelector(".option_list");
const timeCount = quiz_box.querySelector(".timer .timer_sec");
const timeLine = quiz_box.querySelector("header .time_line");
const timeOff = quiz_box.querySelector("header .time_text");
// if start quiz button clicked
start_btn1.onclick = ()=>{
info_box.classList.add("activeInfo"); //show the info box
}
// if exit button clicked
exit_btn.onclick = ()=>{
info_box.classList.remove("activeInfo"); //hide the info box
window.location.href="index.html";
}
// if continue button clicked
continue_btn.onclick = ()=>{
info_box.classList.remove("activeInfo"); //hide the info box
quiz_box.classList.add("activeQuiz"); //show the quiz box
showQuestions(0);
queCounter(1);
startTimer(15);
startTimerLine(0);
}
let que_count = 0;
let que_numb = 1;
let counter;
let counterLine;
let timeValue = 15;
let widthValue = 0;
let userScore = 0;
const next_btn = quiz_box.querySelector(".next_btn");
const result_box = document.querySelector(".result_box");
const restart_quiz = result_box.querySelector(".buttons .restart");
const quit_quiz = result_box.querySelector(".buttons .quit");
/* 원본
restart_quiz.onclick = ()=>{
quiz_box.classList.add("activeQuiz");//show quiz box
result_box.classList.remove("activeResult");//hide result box
let que_count = 0;
let que_numb = 1;
let timeValue = 15;
let widthValue = 0;
let userScore = 0;
showQuestions(que_count); //calling showQestions function
queCounter(que_numb);//passing que_numb value to queCounter
clearInterval(counter);//clear counter
startTimer(timeValue);//calling startTimer function
clearInterval(counterLine);//clear counterLine
startTimerLine(widthValue);//calling startTimerLine function
next_btn.style.display = "none";//hide the next button
timeOff.textContent = "Time Left"; //change the text of timeText to Time Left(Time Off)
}*/
//동영상 보고 따라했지만 restart 실패 그냥 아래처럼 수정
restart_quiz.onclick = ()=>{
window.location.reload();
}
quit_quiz.onclick = ()=>{
window.location.href="index.html";
}
//if next button clicked
next_btn.onclick = ()=>{
if(que_count < questions.length -1){
que_count++;
que_numb++;
showQuestions(que_count);
queCounter(que_numb);
clearInterval(counter);
startTimer(timeValue);
clearInterval(counterLine);
startTimerLine(widthValue);
next_btn.style.display = "none";
timeOff.textContent = "Time Left";
}
else{
// clearInterval(counter);
// clearInterval(counterLine);
console.log("Questions completed");
showResultBox();
}
}
//getting questions and options from array
function showQuestions(index){
const que_text = document.querySelector(".que_text");
let que_tag = '<span>'+ questions[index].numb + ". " + questions[index].question +'</span>';
let option_tag = '<div class="option"><span>'+ questions[index].options[0] +'</span></div>'
+ '<div class="option"><span>'+ questions[index].options[1] +'</span></div>'
+ '<div class="option"><span>'+ questions[index].options[2] +'</span></div>'
+ '<div class="option"><span>'+ questions[index].options[3] +'</span></div>';
que_text.innerHTML = que_tag;
option_list.innerHTML = option_tag;
const option = option_list.querySelectorAll(".option");
for (let i = 0; i < option.length; i++){
option[i].setAttribute("onclick", "optionSelected(this)");
}
}
let tickIcon = '<div class="icon tick"><i class="fas fa-check"></i></div>';
let crossIcon = '<div class="icon cross"><i class="fas fa-times"></i></div>';
function optionSelected(answer){
clearInterval(counter);
clearInterval(counterLine);
let userAns = answer.textContent;
let correctAns = questions[que_count].answer;
let allOptions = option_list.children.length;
if(userAns == correctAns){
userScore += 1;
console.log(userScore);
answer.classList.add("correct");
console.log("Answer is Correct!");
answer.insertAdjacentHTML("beforeend", tickIcon);
}else{
answer.classList.add("incorrect");
console.log("Answer is Wrong!");
answer.insertAdjacentHTML("beforeend", crossIcon);
//if answers is incorrect then automatically selected correct answer
for (let i = 0; i < allOptions; i++){
if(option_list.children[i].textContent == correctAns){
option_list.children[i].setAttribute("class", "option correct");
option_list.children[i].insertAdjacentHTML("beforeend", tickIcon);
}
}
}
//once user selected disabled all options
for (let i = 0; i < allOptions; i++){
option_list.children[i].classList.add("disabled");
}
next_btn.style.display = "block";
}
function showResultBox(){
info_box.classList.remove("activeInfo"); //hide the info box
quiz_box.classList.remove("activeQuiz"); //hide the quiz box
result_box.classList.add("activeResult"); //show the result box
const scoreText = result_box.querySelector(".score_text");
if(userScore > 3){
let scoreTag = '<span>and congrats! You got <p>'+ userScore +'</p> out of <p>'+ questions.length +'</p></span>';
scoreText.innerHTML = scoreTag;
}
else if(userScore > 1){
let scoreTag = '<span>and nice, You got <p>'+ userScore +'</p> out of <p>'+ questions.length +'</p></span>';
scoreText.innerHTML = scoreTag;
}
else{
let scoreTag = '<span>and sorry, You got <p>'+ userScore +'</p> out of <p>'+ questions.length +'</p></span>';
scoreText.innerHTML = scoreTag;
}
}
function startTimer(time){
counter = setInterval(timer, 1000);
function timer(){
timeCount.textContent = time;
time--;
if(time < 9){
let addZero = timeCount.textContent;
timeCount.textContent = "0" + addZero;
}
if(time < 0){
clearInterval(counter);
timeCount.textContent = "00";
timeOff.textContent = "Time Off";
let correctAns = questions[que_count].answer;
let allOptions = option_list.children.length;
for (let i = 0; i < allOptions; i++){
if(option_list.children[i].textContent == correctAns){
option_list.children[i].setAttribute("class", "option correct");
option_list.children[i].insertAdjacentHTML("beforeend", tickIcon);
}
}
for (let i = 0; i < allOptions; i++){
option_list.children[i].classList.add("disabled");
}
next_btn.style.display = "block";
}
}
}
//라인 속도25 너비648 조절 어려움
function startTimerLine(time){
counterLine= setInterval(timer, 25);
function timer(){
time += 1;
timeLine.style.width = time + "px";
// 박스 사이즈를 더 넓게 해서 조금 달라짐 549-->?
if(time > 648){
clearInterval(counterLine);
}
}
}
function queCounter(index){
const bottom_ques_counter = quiz_box.querySelector(".total_que");
let totalQuesCountTag = '<span><p>'+ index +'</p>of<p>'+ questions.length +'</p>Questions</span>';
bottom_ques_counter.innerHTML = totalQuesCountTag;
}
이렇게 하여 어설프게나마 온라인 퀴즈앱을 만드는데 성공했다.
문제가 생길때마다 모니터를 노려보며 1-2일을 고민하고 머리를 쥐어 뜯고, 구글에서 찾고 또 찾아도 뭐가 뭔지 알 수 없었다.
코딩 독학하는 사람들은 이 심정을 알 것이다..
가만히 노려보다가 강의에서 들었던 내용이 가끔 떠오르고, 그럼 그런식으로 해볼까 하며 온갖 실험을 했다.
그렇게 성공을 했으니 코드가 그지같아도 기분은 좋았다 ㅋㅋ
하지만 넘버1은 나에게 말했다..
객관식이 아닌 주관식을 원한다고..
...
그래서 다음편은 온라인 퀴즈앱 주관식이다..
To be continued...
(인스타툰, 텀블러, 유리컵, 그립톡, 폰케이스, 슬리퍼 등)
hodululu | 인포크링크
hodululu님의 멀티링크를 구경해보세요 👀
link.inpock.co.kr
'코딩 공부 + IT 정보 > 코딩 실험' 카테고리의 다른 글
| 티스토리 스킨 편집 2탄, 구글 노출용 포스팅은 따로 있었다! (0) | 2021.08.04 |
|---|---|
| 타자 게임 만들고 영어, 스페인어 공부해보자 (Vanilla JavaScript Speed Typing Game) (0) | 2021.07.29 |
| 코딩 자격증 없이 온라인 퀴즈앱 만들기 - 세번째 이야기 (mp3 플레이어) (4) | 2021.07.25 |
| 코딩 자격증 없이 온라인 퀴즈앱 만들기 - 두번째 이야기(short-answer question quiz app) (0) | 2021.07.23 |
| 티스토리 스킨 편집하기(글씨체, 가운데 정렬, scroll top button 등등) (0) | 2021.07.22 |
