❔ 멀퀴즈 온더 블럭

Read this in English: English.

0. 로컬 실행 방법

npm 실행을 위해 node.js(v12.18.3)를 설치합니다. 설치 후 npm 6.14.6를 확인할 수 있습니다.

npm install
npm -v
6.14.6
npm start

'멀퀴즈 온더 블럭': 여러 기관에서 사용하고 있는 'Kahoot'을 참고한 'QUIZ' 폼의 웹 페이지 입니다. 'Multicampus'를 포함한 여러 교육 기관에서 다양한 프로그램에서 활용할 수 있도록 'QUIZ' 폼의 웹 페이지를 제작했습니다. 💬

추후 유투브 업로드 시, 링크 걸어둘 예정

기능 구현

디자인

😊 임근우 : 감독/총괄 및 Data(store) 관리, 퀴즈 리스트(수정/삽입/삭제) ,퀴즈 디테일(타이머/포인트)

😊 이명호 : 라우터(메인-로그인-퀴즈) 기능, 로그인 기능, 퀴즈 리스트(제거/생성) 및 Publishing 총괄

😊 조혜윤 : 퀴즈 리스트(수정), 퀴즈 디테일 (선택지 & 체크박스 설정, 이미지 업로드), UI 및 GITHUB 담당

😊 윤혜지 : 퀴즈 리스트(제거/생성), 퀴즈 실행 기능 및 UI

메인 화면에서 사용자 계정으로 로그인 기능

사용자 계정 로그인 중 로그아웃 기능

메인 화면에서 Create Quiz 버튼을 이용해서 퀴즈 생성 페이지로 이동

퀴즈 생성 페이지로 이동 후 맨 좌측의 Quiz List 에서 생성 목록 확인 가능

Quiz List 아래 Add Quiz 로 새로운 퀴즈 생성

Select Text 설정

Check Box 설정

Sec 선택

Points 선택

필요한 이미지 업로드

모든 수정사항 저장

상단 Navigation 의 Done 으로 퀴즈 게시

퀴즈 화면 좌측 Start Quiz Modal 으로 퀴즈 시작

정해진 시간이 끝날시 Time Out 메세지 출력

하단의 각 Select Box 로 정답 체크 후 제출

결과 알림 (정답/오담)

첫 화면-> 메인페이지

Create 버튼과 Login 버튼으로 구성

로그인 페이지: 로그인 실행

아이디: test | 비밀번호: 123

아이디와 비밀번호가 잘 못 입력되었을 시, 접속이 되지 않으면서 경고창 뜨게 함

퀴즈 폼 생성 페이지

퀴즈 실행 페이지

1번부터 퀴즈 실행하게 설정

Start Quiz Modal 을 눌러 타이머 시작

정답을 맞추면 점수에 맞춰 포인트 획득

시간초과가 되면 Timeout 발생

Name		Name	Last commit message	Last commit date
Latest commit History 106 Commits
config		config
node_modules		node_modules
public		public
scripts		scripts
src		src
.gitignore		.gitignore
README.md		README.md
README_EN.md		README_EN.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tenlines.txt		tenlines.txt
yarn.lock		yarn.lock