<온라인퀴즈 대본 2>

※ < > 안에 있는 내용은 사진이고 맨 앞의 숫자는 캡처사진의 index입니다.

ex) <18_localStorage화면/ Answers에 강조 표시>

->캡처18 사진

->localStorage화면 : 부연설명 (없는 경우도 있음)

->Answer에 강조표시 : ppt에 넣을 때 Answer부분을 강조표시 해주세요.

*특이사항 : 3번 사진은 없습니다.

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

저희는 요즘 같이 다수가 모이기 힘들지만 시험은 꼭 봐야하는 상황을 대비하여 교수님들이 이용할 수 있는 온라인 퀴즈 프로그램을 만들었습니다. 구성은 로그인페이지, 관리자 페이지, 퀴즈페이지, 결과 페이지로 구성되어 있고, 원리는 각각의 페이지를 만들어서 링크를 통해 이동하여 페이지 전환이 이루어지도록 설정하였습니다.

이것을 구현하기위해서 리액트라는 것을 사용했는데 리액트는 쉽게말해서 상태를 주고 변경하기에 아주 쉬우면서 javascript를 기반으로 하는 프로그램입니다.

<1_Home화면>

우선 홈 화면은 로그인페이지입니다. 로그인페이지에서는 관리자 또는 사용자로 로그인할 수 있습니다. 관리자는 교수님이고 사용자는 우리 학생이겠죠. 교수님께서 먼저 문제를 출제하신 후에 학생들이 사용하는 방식이라 먼저 관리자로 로그인하여 문제를 출제하겠습니다.

<2_관리자의 아이디로 로그인 화면>

관리자의 아이디로 로그인합니다.

<4_admin페이지>

교수님께서 문제를 출제하시고 다른 사람들이 로그인 하지 못하도록 비밀번호를 설정해서 학생들에게 그 비밀번호를 알려주며 퀴즈를 풀게 하는 방식인데, 비밀번호에 대한 보안을 위해 비밀번호를 바꿔야하는 경우가 발생할 수 있잖아요. 그럴 때 비밀번호 변경을 할 수 있는 관리자 설정페이지를 만들었습니다. 관리자 설정페이지는 여기 보이는 'Setting‘버튼을 통해 들어갈 수 있습니다.<4화면에서 계속_Setting버튼 강조 애니메이션>

<5_관리자 설정 변경 창>

이렇게 새로운 비밀번호를 입력할 수 있도록 구성되어 있구요, 관리자의 비밀번호도 마찬가지로 보안을 위해 비밀번호 변경기능을 넣었습니다.

그리고 시험에는 보통 제한시간이 주어지잖아요. 그 설정을 여기서 할 수 있습니다.

(1000당 1초)

<6_경고창>

이 세 개중에서 하나라도 입력하지 않을 시 경고창이 나와 저장이 안 되도록 설정하였습니다.

<7_localStorage화면/ Set부분 강조(밑줄)>이렇게 저장한 정보들은 개인 컴퓨터의 저장소인 localStorage에 저장되어 적용됩니다. localStorage에 저장하는 이유는 localStorage에 있는 데이터는 나중에 불러와서 이용하기 쉽기 때문입니다.

<8_Quiz1/ 좌측에 Quiz1버튼 강조애니메이션or표시>

두 번째로 ‘Quiz’버튼을 누르면 이 프로그램의 주요 기능인 문제출제 기능이 나오는데 여기서 문제, 객관식 문제의 보기, 정답을 입력할 수 있습니다.

객관식 문제를 출제하는 프로그램이라 여러 개의 보기가 필요한 경우가 많아서 ‘+’버튼을 눌러 보기를 추가하여<8화면에서 계속_보기 input박스 아래의 ’+’버튼 강조 애니메이션> 입력 할 수 있도록 하였습니다<9_추가된 보기화면>.

정답 칸에는 정답이 되는 보기의 번호를 입력하면 됩니다.

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

<9-1_경고창>

여기도 마찬가지로 세 개중에 하나라도 입력하지 않을 경우 나중에 오류가 생길 경우를 대비해 경고창이 나와 저장이 안 되도록 설정하였습니다.

<10_localStorage사진/QnA부분 강조(밑줄)>

이렇게 Quiz에서 입력한 정보들도 localStorage에 저장하여 사용합니다.

<11_localStorage사진/하단의 배열부분 강조>

Quiz2와 Quiz3에서도 같은 작업을 해서 2번문제와 3번문제를 만들어줍니다.

<12_다시 Quiz1사진/ 각각의 input박스들에 밑줄>

그리고 예를 들어 3번 문제를 입력하다가 1번 문제를 수정하고 싶을 때는 1번 문제의 Quiz버튼을 누르면 1번에 입력했었던 정보들이 남아있어서 수정할 수 있습니다. 이렇게 원하는 문제를 수정할 수 있는 기능도 있구요.

4개 이상의 문제를 출제할 경우에 대비하여 좌측 바의 ‘+’버튼을 누르면<12사진에서 계속_Quiz3버튼 아래의 ‘+’버튼 강조 애니메이션> 문제를 추가로 입력할 수 있는 기능을 넣었습니다.<13_증가된 퀴즈 수>

이렇게 문제를 모두 출제한 후에 좌측상단의 'Home'을 통해 홈으로 돌아가서<13화면에서 계속_좌측상단의 Home버튼 강조 애니메이션>

<1_Home화면>

사용자로써 퀴즈를 시작해보겠습니다. 사용자는 자신의 이름과 설정된 비밀번호로 로그인하면 퀴즈를 시작할 수 있습니다.

<14_경고창사진>

아까 설정했던 비밀번호와는 다른 비밀번호를 입력한다면 로그인 할 수 없도록 경고창이 나오고

<15_이름 나오는 사진 / 이름(정연우)에 밑줄로 강조표시>

맞게 입력했다면 입력한 이름이 나오면서 퀴즈가 시작됩니다.

<16_name과 password 묶어서 강조표시(박스가 좋을 듯 합니다.)>

입력한 로그인 정보 역시 localStorage에 저장되도록 하였고 이것은 나중에 서버와 연결하여 로그인 정보를 저장하고 확인하는데 사용될 것입니다.

<17_Quiz화면>(수정필요)

Quiz화면에서는 아까 입력했던 문제와 보기들이 화면에 나오면서 퀴즈가 시작됩니다.<17화면에서 계속_문제와 보기부분 박스로 묶어서 표시 애니메이션>

아까 설정했던 제한시간이 타이머로 작동되고<17화면에서계속_타이머 부분 강조 애니메이션(밑줄)> 0초가 된다면 제한시간이 끝났기 때문에 자동으로 퀴즈가 종료되고 결과페이지로 넘어갑니다.

여기서 타이머는 외부 모듈을 받아와서 사용했습니다.

답을 체크하고 다음문제로 넘어가기 위해서 ‘다음’버튼을 누르면<17화면에서 계속_다음버튼 강조 애니메이션> 다음문제로 넘어갈 수 있고 사용자가 입력한 답은 localStorage에 저장되어 마지막에 채점할 때 사용됩니다<18_localStorage화면/ Answers에 강조 표시>.

이거는 제가 3번까지 답을 체크하고 나온 화면이라 Answer에 선택한 값이 전부 들어가 있습니다. Answer아래에 보시면 'Solution'이란 것도 들어가 있는데 마지막에 채점할 때 사용되는 실제 정답입니다.<18화면에서 계속_Solution부분 강조 애니메이션>

<19_3번문제까지 각각 캡쳐> 다음버튼을 누르면 이렇게 다음 문제가 나오구요.

<20_3번째 문제화면/제출버튼 강조>이렇게 마지막 문제에 도달하면 ‘다음’버튼 대신에 ‘제출’버튼이 나와서 이걸 누르면 입력한 답들이 제출되어 마지막 결과페이지로 넘어가게 됩니다.

<21_결과페이지>

마지막 결과페이지에서는 localStorage의 사용자가 체크한 답과 실제 정답을 비교하여 채점을 하는데 그 결과를 점수와 함께 표로 나타냅니다.

네, 1개맞아서 1점이네요.

<22_시간초과경고>

만약에 시간초과가 돼서 답을 전부 입력하지 못하였다면 경고창이 뜨고 강제로 결과페이지로 넘어가게 되면서 입력하지 못한 답안에 대해서는 ‘정답이 입력되지 않았습니다’라는 메시지가 나오게 하여 구분하였습니다.<23_시간초과 결과페이지 / ‘정답이 입력되지 않았습니다’ 강조표시>