<온라인퀴즈 대본>

(이 프로젝트의 목표와 주제 설명)

(리액트를 이용해서 했다고 리액트 설명-원리,사용이유,index.js 등등)

(css는 전부 부트스트랩을 이용하여 했습니다.)

<Home>

여기서 두 가지 갈래 길이 있는데 관리자로 로그인하거나 사용자로 로그인 할 수 있습니다.<관리자로 로그인하는 화면><사용자로 로그인하는 화면>

저희는 페이지를 이동하는 과정은 새로운 페이지를 만들어서 링크를 타고 이동하는 방식을 이용하였습니다.<링크와 함께 admin페이지>

<<hook에 대해 설명>> 여기서 ‘result’라는 상태를 띄워놓고<admin페이지에서 빈공간에 result가 써있도록> 여기 ‘설정’의 버튼을 누를 때 마다 버튼에 맞는 상태로 result를 변경시켜서 창을 띄우는 방식입니다.

여기서 setting을 누르면 result의 상태가 ‘관리자 설정’으로 변경되어서 이런 화면이 나오게 되는거죠.

<admin페이지>

관리자 페이지에서는 ‘관리자설정’과 ‘문제출제’를 할 수 있습니다.

우선 ‘관리자 설정’으로 가보면<adminSetting화면> 여기서 사용자 비밀번호, 관리자 비밀번호, 제한시간을 설정할 수 있고 이 중에서 하나라도 입력하지 않았을 경우 경고가 뜨도록 설정하였습니다<경고창>. 그리고 '작성완료‘버튼을 누르면 이렇게 생긴 변경사항들은 localStorage에 저장되어 적용되도록 하였습니다<localStorage창>.

<adminQuiz화면>

마찬가지로 여기서 ‘Quiz‘버튼을 누르게 되면 result의 상태가 이번에는 ’퀴즈‘로 변경되어서 이렇게 나오게 되는 겁니다.

이곳에서 문제를 입력하고 객관식문제의 보기와 정답을 입력하는 입력창이 있습니다.

‘보기를 입력하기’에서 보기를 추가하고 싶다면 ‘+’버튼을 누르면 보기입력창이 추가됩니다. 이것도 ‘result상태’와 마찬가지로 'list'라는 상태를 띄워놓고<입력칸과 +버튼사이에 list가 써있도록> ‘+’버튼을 누를 때 마다<‘+’버튼 강조표시 애니메이션> 입력창이 하나씩 추가되어 업데이트되는 방식을 사용하였습니다<보기추가했을 때 모습>.

*****추가된 보기에 입력된 정보를 받아오는 과정은 아직 완성하지 못해서 임시방편으로 첫 번재 보기에 연속으로 입력하는 방식으로 대체하였습니다.*****

정답을 입력할 때는 정답인 보기의 번호를 입력해주시고 ‘작성완료’버튼을 누르면 아까와 마찬가지로 localStorage로 저장되도록 설정하였습니다<localStorage창>.

((지금 보시면 3개의 문제가 저장되어있는데 3문제까지는 기본값으로 저장시켜놔서 이렇게 나오는 것이고, 추가로 'Quiz2', 'Quiz3'에서 입력하면 이렇게 업데이트 되도록 설정하였습니다.))

그리고 이전의 Quiz버튼을 누르면 이전에 입력했었던 정보들이 다시 나오도록 설정하였습니다.

추가로 문제를 입력하고 싶다면 '+'버튼을 누른면<‘+’버튼 강조표시 애니메이션> 문제를 추가로 입력할 수 있도록 하였습니다.

이렇게 문제 입력을 마치고 난 후에 상단의 'Home'화면을 눌러서 홈화면으로 돌아갑니다<상단의 Home버튼 강조표시>.

여기서 아까 입력했던 사용자 정보에 맞게 로그인 할 수 있습니다<로그인 화면>.

올바르지않은 정보를 입력한다면 경고창이 발생하고<경고창> 로그인하면 입력한 이름이 뜨도록 하였습니다<alert창>.

로그인 정보역시 localStorage에 저장되도록 설정하였습니다<localStorage화면>.

<Quiz화면>

아까 입력했던 문제들이 화면에 나오면서<문제&보기부분 강조 애니메이션> 퀴즈를 풀 수 있습니다.

여기서 문제가 나오는 방식은 마찬가지로 'quiz'라는 상태를 띄워놓고 관리자 페이지에서 입력한 문제들로 업데이트 시켜주는 방식으로 하였습니다<문제&보기부분이 quiz상태라는 메세지>.

제한시간을 보면 아까 입력햇던 것과 일치합니다<시간 강조표시 애니메이션>. 이 타이머는 외부 모듈을 import해서 사용했습니다.

여기 이 시간이 0이된다면 퀴즈를 마치고 바로 종료화면으로 넘어가도록 링크를 설정하였습니다.

그래서 ‘다음’버튼을 누르면 다음문제가 나옵니다<‘다음’버튼 강조 애니메이션>.

그리고 퀴즈를 시작하면(로그인을 하면) localStorage에 정답(Solution)이 저장되도록 하였고, 여기서 사용자가 답을 선택하고 ‘다음’버튼을 누르면 사용자가 입력한 답이 localStorge에 저장되도록 하였습니다<localStorage화면>.

<3번까지 각각 화면 캡쳐>

이렇게 마지막문제에 도달하면 ‘제출’버튼이 나오게 하였고<‘제출’버튼 강조> 이 버튼을 누르면 마지막 화면으로 이동하도록 링크를 설정하였습니다.

<End화면>

마지막 종료화면에 오게 되면 사용자가 입력했던 답들과 실제 정답을 비교하고 채점하여 점수와 함께 표로 보여줍니다.

여기서 채점을 할때는 localStorage에 저장되어있던 사용자의 답(Answers)과 정답(Solutions)을 비교하는 방식으로 하였습니다.

************

result list 이름을 쉽게 바꿀것