지침

1. 교사가 새로운 학생을 등록할 수 있도록 학년, 반, 이름을 등록

2. 교사가 등록된 학생 이름을 드롭다운 목록으로 제공한 것을 선택

3. 행동 분야 선택(예 수업 태도, 언어, 학교폭력, 학습 태도, 기타)

4. 자동 기록 사항: 현재 날짜 및 시간은 자동으로 입력

출력

1. 별도의 학생 기록 조회 메뉴 버튼 생성

2. 드롭 다운에서 특정 학생의 이름을 선택하면 해당 학생의 기록만 필터링하여 총 몇 회 누가기록이 되었고 분야 별로 몇 건이 입력되었는지 횟수 확인 가능

3. 학생 기록 사항 확인 가능

4. 등록-입력-조회를 위에 각기 다른 3개의 탭을 생성하여 활용

목표: [학교 교직원 연수 결과 수집]을 위한 웹 애플리케이션을 만들고 싶습니다. 사용자가 웹에서 정보를 입력하고 파일을 첨부하면, 구글 스프레드시트와 구글 드라이브에 자동으로 저장되는 시스템입니다.

요구사항 상세:

1. 프론트엔드 (index.html):

- 깔끔하고 직관적인 디자인 (CSS 포함).

- 다음 항목들을 입력받아야 합니다:

1. [이름]: 드롭박스(Select) 형태. 옵션: [김00, 박00, 최00]

2. [연수명]: 드롭박스(Select) 형태. 옵션: [꾸러미연수, 안전연수, 장애이해연수]

3. [파일 첨부]: [PDF] 파일만 업로드 가능하도록 설정.

- '제출하기' 버튼을 누르면 로딩 표시가 뜨고, 완료 후 성공 메시지를 보여주세요.

2. 백엔드 (Code.gs):

- `doGet` 함수를 사용하여 HTML을 렌더링하세요.

- `processForm` 함수를 사용하여 데이터를 처리하세요.

- 구글 드라이브 연동: 첨부된 파일을 지정된 폴더에 저장하고, 파일명은 `[연수명]_[이름]_이수증` 형식으로 자동 변경해주세요.

- 구글 스프레드시트 연동: 다음 순서로 데이터를 한 행에 저장해주세요.

(타임스탬프, [이름], [연수명], 제출여부, 파일링크)

- 특이사항: 스프레드시트에 저장될 때 '제출여부' 칸은 텍스트 대신 체크박스(Checkbox)가 삽입되고 체크된 상태(true)로 저장되게 해주세요.

출력 형식:

- `Code.gs` (백엔드 코드)와 `index.html` (프론트엔드 코드) 두 개의 파일로 나누어 작성해주세요.

- 초보자도 쉽게 설정할 수 있도록 스프레드시트 ID와 폴더 ID를 넣는 변수 부분은 코드 상단에 주석과 함께 명확히 표시해주세요.

1. 시작 화면

- 웹앱 제목: "빛의 마법사: 거울과 렌즈를 찾아라!"

- 학생의 이름을 입력하는 칸

2. 퀴즈 화면

- 일상생활 속 물건이 나오고 렌즈와 거울 중에서 어떤 것을 활용한 것인지 맞추는 게임 웹앱을 만들어줘

- 제목이 빛의 마법사니까 마법사가 정답을 고르는 효과를 마법 효과로 만들어줘

- 학생이 버튼을 클릭하면 정답/오답 여부를 시각적(색상 변화, O/X 표시)으로 즉시 알려주고 다음 문제로 넘어가게 해줘

- 상단에는 현재 진행 상황(예: 3/5)과 현재 점수를 표시해 줘

-문제는 총 5문제를 만들어줘

3. 결과 및 수료증 화면

- 퀴즈가 모두 끝나면 최종 점수(%)를 계산해서 보여줘.

- 정답률이 80% 미만일 경우: "조금 더 연습해 볼까요?"라는 문구와 함께 [다시 도전하기] 버튼을 보여줘.

- 정답률이 80% 이상일 경우: 화면에 화려한 폭죽 효과(CSS 또는 JS 활용)와 함께 '거울과 렌즈 마스터 수료증'을 화면에 예쁘게 렌더링해 줘.