[스파르타코딩온라인] 개인프로젝트 2
이번 주는 월말이라 그런지 퇴근하고 너무 힘들어서 제대로 한 게 없다.
주말에도 이것저것 해보려고 했는데 제대로 되는 것도 없어서 시간만 낭비한 한주.
Heroku를 사용해서 저번에 만든 숙제를 실행해보려고 했는데 실패함.
다음에 다시 시도해보도록 하고... 개인 프로젝트 진행 상태 업데이트를 한다.
일단 아직도 내 머릿속에 어떻게 만들어야 되는지 몰라서 유튜브랑 구글에서 검색을 더해봤는데
생각보다 쉽지 않을 것 같다.
1. 질문이랑 답들을 DB에 넣어놔야 하나?
그냥 variable로 해도 되지 않나?
2. JavaScript로 동작을 만들면 되나?
일단 유튜브에서 제일 심플하고 간단하게 생긴 퀴즈 만들기부터 시작해봤다.
Javascript로만 만든 몇 줄 안 되는 심플한 코드라서 따라 해 보기로,
근데 막상 또 해보니깐 심플한 코드 몇 줄이라도 따라만 한다고 무조건 되는 게 다 아닌 것 같다....
(여기가 JS 간단하게 잘가르쳐주는거같음 시간되면 다봐야지)
Mike Dane
Mike Dane has one simple goal, to create the highest quality and entertaining educational content on the internet.
www.mikedane.com
여기서 Javascript로 간단하게 퀴즈 만드는 걸 보고 따라 했는데
생각해보니 Javascript파일을 실행하는 법을 몰랐다. 나는 그냥. JS file로 저장하고 실행하면 될 줄 알았는데.
그래서 계속 찾아보다가 이렇게 오늘 또 하나 배운다.
HTML에 javasctipt 태그 사용해서 넣고 실행하면 된다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="text/javascript">
var questions = [
{
prompt:
"What color are apples?\n(a) Red/Green\n (b) Purple\n(c) Orange",
answer: "a",
},
{
prompt: "What color are Bananas?\n(a) Teal\n (b) Magenta\n(c) Yellow",
answer: "c",
},
{
prompt:
"What color are strawberries?\n(a) Yellow\n (b) Red\n(c) Blue",
answer: "a",
},
];
var score = 0;
for (var i = 0; i < questions.length; i++) {
var response = window.prompt(questions[i].prompt);
if (response == questions[i].answer) {
score++;
alert("Correct!");
} else {
alert("WRONG!");
}
}
alert("you got " + score + "/" + questions.length);
</script>
</head>
<body></body>
</html>
이렇게 하니 그제야 유튜브에서 본 대로 잘 나온다...
인제 시작인데 벌서부터 힘들다.
이코드는 Quiz set 을 Array?형태로 만들어서 variable에 넣고 그걸 그냥 단순하게 불러 오는 방법.
답 체크하는것도 answer로 설정해서 response가 answer가 같은 값인지 그냥 간단한게 확인하는방법인데, 이건 그냥
prompt 화면에 작게보이는거라 내가 원하는게아니다. 그래도 기본적인 퀴즈를 만들어볼수있어서 연습용으로 좋앗다.
[updated]
일단 mongoDB에다가 퀴즈를 넣어놓고 퀴즈를 get으로 가져와서 front에서 javascript으로? 퀴즈 를 구현하면 될것같다.
variable에다가 퀴즈 를 넣어놓는것보다 좀더 복잡해보이지만, 일단 어려운것부터해보고 정안되면 쉬운걸로 하면되니깐.
저번주에 많이 못해서 이번주에 는 일단 Home page html 윤곽이라도 다 짜놓고 주말동안에 javascipt로 퀴즈를 만드는게 이번주 목표.
Reference :
https://www.youtube.com/watch?v=riDzcEQbX6k
https://www.youtube.com/watch?v=49pYIMygIcU
https://www.youtube.com/watch?v=LQGTb112N_c
'IT > Web Programming' 카테고리의 다른 글
| [Nomadcoder] Lecture 2 .2 Dynamic Component Generation에러 (0) | 2020.07.02 |
|---|---|
| [Namad Coders] React JS 영화 웹서비스 만들기 (0) | 2020.06.29 |
| [스파르타코딩 온라인] 프로젝트 1.1 차 기획안 (0) | 2020.06.19 |
| [스파르타코딩 온라인] 프로젝트 1차 기획안 (0) | 2020.06.17 |
| HTML , CSS , JavaScript , Python 주석처리방법 (2) | 2020.06.15 |
