## 3주차 구현
### 백엔드
- 해야할것 :
1. long api -> T/F api로 수정
### 프론트엔드
- 해야할것 :
1. 퀴즈 풀기 (모두) -> 서버와 연결 2 [J145, J048]
2. 퀴즈 생성 페이지 (T/F) 만들기 ? 3 [S017, K024, S030]
3. 정답 처리 로직 구현 2 []
4. 점수 표시 및 저장
- 표시는 toast로 표시
- mongodb에 점수저장
- 마지막 최종점수 출력 -> 닉네임입력창 -> 닉네임 입력 -> mongodb에 저장
# 🏃♀️ 릴레이 프로젝트
> - 1주차
`J126_오수완` `J166_이충헌` `S016_박상우` `S043_이정엽` `J151_이원주` `J086_박상진` `K044_이원중` `J146_이영범`
> - 2주차
`J052_김정윤` `J056_김준호` `S037_이남준` `J061_김창현` `J091_박주원` `J094_박춘화` `K047_이효동` `K041_이상건`
> - 3주차
`J048_김은규` `J144_이승주` `J145_이신필` `K024_박치윤` `S017_박세원` `S030_오창민` `S049_이태혁`
> - 4주차
# 🐾 개스퀴 🐾 - 개발자를 위한 스피드 퀴즈 서비스
<center><img style='margin-bottom:20px; width:300px;' src="https://user-images.githubusercontent.com/40421183/126756706-81b0a521-3ecd-4543-9a14-f37e4e6cf6e6.png"></center>
### 서비스 개요
- 개발자들의 CS 지식 함양을 위한 자가퀴즈 진단 서비스
- [`Quizlet`](https://quizlet.com/ko)에서 착안
- 시간과 장소에 구애받지 않고 퀴즈로 쉽게 자가 진단할 수 있는 서비스 제공
### 주요 기능
- 메인 화면에서 임의로 작성한 퀴즈 n개를 보여준다.
- 생성 화면에서 사용자가 직접 퀴즈를 생성한다.
- 퀴즈가 종료되면 퀴즈 결과를 점수화 해 점수를 저장, 랭킹을 보여준다.
### 와이어프레임
### 기대효과
- 반복적인 퀴즈를 통해, 효율적으로 단기 기억(지식)을 장기 기억으로 전환한다.
## 기능 명세
### A . 퀴즈 추가
- 퀴즈 데이터 CRUD
- 퀴즈 유형 예시
- 단답형
- 같은 용어(`데드락`, `교착상태`, `deadlock`)을 정답처리
- 학습자가 같은 용어라고 생각이 든다면 `issue` 등록
- 서술형
- 서술 문장내 포함된 키워드를 통하여 부분점수 도출
- 객관식
- True or False
- **+α(선택)**
- 퀴즈 카테고리 분류하기
### B . 게임 기능
- 입력된 데이터 기반으로 퀴즈 생성
- **+α(선택)**
- 인공지능으로 자동 카테고리 생성
- 다시 풀기
### C . 게임 형식의 랭킹 시스템 구축
- 데이터 불러오기
- 사용자들의 점수 출력
- **+α(선택)**
- SNS에 문제집 공유
## 추가적으로 구현해볼 사항
- 틀렸던 퀴즈 다시 풀기
- 회원가입 및 로그인
- 퀴즈 스크랩
## 주차별 구현 기능
| <center>주차</center> | <center>기능</center> | <center>세부기능</center> |
| --------------------------------- | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <center>2주차 (7월 30일)</center> | <center>퀴즈 추가</center> | 페이지 구현 - 개념의 이름과 정의를 입력 받는 페이지 구현<br><br>1. 개념의 이름과 정의를 입력합니다.<br>2. 입력 받은 데이터를 저장소에 저장합니다. |
| <center>3주차 (8월 6일)</center> | <center>게임 기능(주관식 단답형)</center> | 페이지 구현 - 문제를 푸는 <b>메인</b> 페이지 구현<br><br>1. 저장소에서 일정 만큼의 데이터를 랜덤하게 가져옵니다.<br>2. 가져온 n개의 데이터{이름, 정의}를 문제형식으로 바꿔 위젯에 데이터 바인딩을 합니다.<br><br>예시)<br>질문(데이터.정의 + “란 무엇을 뜻하는가?”)<br>답변(가져온 데이터와 입력받은 데이터를 비교합니다.)<br><br>3.사용자가 입력한 답변과 가져온 데이터가 일치하면 정답처리를 합니다.<br>4.문제를 다 풀었으면 점수화해 저장소에 저장합니다<br> |
| <center>4주차 (8월 13일)</center> | <center>게임 형식의 랭킹 시스템 구축</center> | 페이지 구현 - 퀴즈가 끝나면 사용자들의 점수를 랭킹화해서 보여주는 페이지 구현<br><br>1. 저장소(로컬 혹은 웹의 저장소)에서 퀴즈를 푼 사람들의 정보를 가져옵니다.<br>2. 뷰에 랭킹 형식으로 나의 점수와 사람들의 점수를 출력합니다. |
# 🐾 개스퀴 🐾 - 백엔드
### 기술 스택
- Node.js (Express) + MongoDB (mongoose)
### 사용 환경 설정
1. 백엔드 파일 클론하기
```bash
> git clone https://github.com/Winters0727/Quiz_Backend
```
2. 의존성 파일 설치 - `package.json` 파일 확인
```bash
> npm install
```
3. Mongo DB 설치
- MongoDB Community Server
- MongoDB Compass (선택)
- https://www.mongodb.com/try/download
4. 환경변수 설정 - `.env` 파일 생성(Backend directory 내부에 생성해줄 것)
```
DATABASE_URL=(Mongo DB 로컬 URL : mongodb://localhost:27017/)
PORT=(사용할 포트 번호)
```
5. `bin/www` 파일 실행
```bash
> node bin/www
> nodemon bin/www
```
****
### 데이터 모델 스키마 (3주차 수정)
**단답형 퀴즈**
| **데이터** | **키** | **자료형** | **옵션** |
| :--------------: | :-------------: | :--------: | :------: |
| 퀴즈 문제 | `quizQuestion` | `String` | 필수 |
| 퀴즈 정답 | `quizAnswer` | `Array` | 필수 |
| 퀴즈 카테고리 | `quizCategory` | `Array` | 필수 |
| 퀴즈 플레이 횟수 | `quizPlayCount` | `Number` | |
| 퀴즈 생성 시점 | `createdAt` | `Date` | |
| 퀴즈 변경 시점 | `updatedAt` | `Date` | |
**OX 퀴즈**
| **데이터** | **키** | **자료형** | **옵션** |
| :--------------: | :-------------: | :--------: | :------: |
| 퀴즈 문제 | `quizQuestion` | `String` | 필수 |
| 퀴즈 정답 | `quizAnswer` | `String` | 필수 |
| 퀴즈 카테고리 | `quizCategory` | `Array` | 필수 |
| 퀴즈 플레이 횟수 | `quizPlayCount` | `Number` | |
| 퀴즈 생성 시점 | `createdAt` | `Date` | |
| 퀴즈 변경 시점 | `updatedAt` | `Date` | |
**객관식 퀴즈**
| **데이터** | **키** | **자료형** | **옵션** |
| :--------------: | :-------------: | :--------: | :------: |
| 퀴즈 문제 | `quizQuestion` | `String` | 필수 |
| 퀴즈 정답 | `quizAnswer` | `Number` | 필수 |
| 퀴즈 선택지 | `quizSelection` | `Array` | 필수 |
| 퀴즈 카테고리 | `quizCategory` | `Array` | 필수 |
| 퀴즈 플레이 횟수 | `quizPlayCount` | `Number` | |
| 퀴즈 생성 시점 | `createdAt` | `Date` | |
| 퀴즈 변경 시점 | `updatedAt` | `Date` | |
****
### Endpoint
**로컬 서버 Base URL** : `http://localhost:(포트번호)/`
**퀴즈 API Base URI** : `api/quiz/(퀴즈 타입 : short, trueFalse, select)`
- `http://localhost:(포트번호)/api/quiz/short`
- `http://localhost:(포트번호)/api/quiz/trueFalse`
- `http://localhost:(포트번호)/api/quiz/select`
**랜덤 퀴즈 Base URL** : `http://localhost:(포트번호)/api/quiz/random` (GET)
- 단답형, 서술형, 객관식 퀴즈 각각의 최신 퀴즈 10개를 불러와서 그중 무작위로 5개를 선택해 넘겨준다.
- 퀴즈 개수의 합이 5개 미만이라면 그 개수만큼의 퀴즈를 넘겨준다.
단답형, 서술형, 객관식 퀴즈 모두 퀴즈 타입을 제외하면 동일한 CRUD Endpoint를 가진다.
`quizId`는 Mongo DB에서 제공하는 `_id`를 의미한다.
| **Endpoint** | **HTTP Method** | **설명** |
| :----------: | :-------------: | :----------------------------------------------------------: |
| `/` | POST | 퀴즈를 생성합니다. |
| `/?limit=1` | GET | 퀴즈 리스트를 가져옵니다.<br />Query로 `limit`를 입력하면 가져올 데이터 양을 제한합니다. |
| `/:quizId` | GET | 특정 퀴즈를 가져옵니다. |
| `/:quizId` | PUT | 특정 퀴즈를 변경합니다. |
| `/:quizId` | DELETE | 특정 퀴즈를 제거합니다. |
- Post 예시
- URL : `http://localhost:8000/api/quiz/short`
- http method : POST
- 데이터 :
```json
{
"quizQuestion" : "둘 이상의 프로세스가 다른 프로세스가 점유하고 있는 자원을 서로 기다릴 때 무한 대기에 빠지는 상황을 뭐라고 하나요?",
"quizAnswer" : ["데드락", "deadlock", "교착상태"],
"quizCategory" : ["운영체제", "컴퓨터", "프로그래밍"]
}
```
****
Sign in with Wallet
Connect another wallet