웹 기반의 다기능 인터랙티브 퀴즈 앱을 HTML, CSS, JS로 빠르게 구축하고 싶을 때.
Develop a comprehensive interactive quiz application with HTML5, CSS3 and JavaScript. Create an engaging UI with smooth transitions between questions. Support multiple question types including multiple choice, true/false, matching, and short answer with automatic grading. Implement configurable timers per question with visual countdown. Add detailed score tracking with points based on difficulty and response time. Show a dynamic progress bar indicating completion percentage. Include a review mode to see correct/incorrect answers with explanations after quiz completion. Implement a persistent leaderboard using localStorage. Organize questions into categories with custom icons and descriptions. Support multiple difficulty levels affecting scoring and time limits. Generate a detailed results summary with performance analytics and improvement suggestions. Add social sharing functionality for results with customizable messages.
HTML5, CSS3 및 JavaScript를 사용하여 포괄적인 인터랙티브 퀴즈 애플리케이션을 개발하세요. 질문 간 매끄러운 전환 효과가 있는 몰입감 있는 UI를 만드세요. 객관식, 참/거짓, 매칭, 자동 채점이 포함된 단답형 등 다양한 질문 유형을 지원하세요. 시각적 카운트다운이 포함된 질문별 설정 가능한 타이머를 구현하세요. 난이도 및 응답 시간을 기준으로 한 점수를 포함하여 상세한 점수 추적을 추가하세요. 완료 백분율을 나타내는 동적 진행률 표시줄을 표시하세요. 퀴즈 완료 후 설명과 함께 정답/오답을 확인할 수 있는 검토 모드를 포함하세요. localStorage를 사용하여 지속적인 리더보드를 구현하세요. 사용자 지정 아이콘과 설명으로 질문을 카테고리별로 구성하세요. 점수 산정 및 시간 제한에 영향을 미치는 여러 난이도 수준을 지원하세요. 성과 분석 및 개선 제안이 포함된 상세한 결과 요약을 생성하세요. 맞춤형 메시지와 함께 결과에 대한 소셜 공유 기능을 추가하세요.
출처 · prompts.chat · Interactive Quiz — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.
Gemini로 프롬프트를 실행해 생성한 화면입니다. 화면 안에서 직접 조작하실 수 있습니다.
TPI 지식 퀴즈는 카테고리 및 난이도별 설정과 다채로운 문제 유형(객관식, 참/거짓, 매칭, 단답형)을 지원하는 반응형 퀴즈 웹 애플리케이션입니다. 실시간 카운트다운 타이머, 자동 채점, 세밀한 성과 분석 차트, 오답 복습 모드 및 리더보드 기능을 완벽하게 갖춘 통합 HTML 파일로 구현되었습니다.
Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).
Develop a comprehensive interactive quiz application with HTML5, CSS3 and JavaScript. Create an engaging UI with smooth transitions between questions. Support multiple question types including multiple choice, true/false, matching, and short answer with automatic grading. Implement configurable timers per question with visual countdown. Add detailed score tracking with points based on difficulty and response time. Show a dynamic progress bar indicating completion percentage. Include a review mode to see correct/incorrect answers with explanations after quiz completion. Implement a persistent leaderboard using localStorage. Organize questions into categories with custom icons and descriptions. Support multiple difficulty levels affecting scoring and time limits. Generate a detailed results summary with performance analytics and improvement suggestions. Add social sharing functionality for results with customizable messages.
mopick 지식 퀴즈는 카테고리 및 난이도별 설정과 다채로운 문제 유형(객관식, 참/거짓, 매칭, 단답형)을 지원하는 반응형 퀴즈 웹 애플리케이션입니다. 실시간 카운트다운 타이머, 자동 채점, 세밀한 성과 분석 차트, 오답 복습 모드 및 리더보드 기능을 완벽하게 갖춘 통합 HTML 파일로 구현되었습니다.
mopick 개선안
원문을 그대로 넣으면 AI 가 매번 다르게 답하거나 중요한 부분을 빠뜨릴 수 있습니다. 개선안은 원문의 뜻과 언어는 그대로 두고 역할 · 바꿔 넣을 입력 칸 · 결과 형식 · 지킬 조건을 보완해 다시 쓴 버전입니다. 원문과 같은 곳(ChatGPT · Claude 등)에 그대로 붙여 넣어 쓰면 됩니다.
AI 평가 점수 — 명확성 · 구체성 · 결과 형식 · 재사용성 기준(100점)
AI 역할레슨 01 배우기 ›
원문 · 없음AI 에게 맡길 역할이 정해져 있지 않아 답의 관점 · 수준이 그때그때 달라질 수 있었습니다.
개선 · 역할을 정함Act as a Senior Frontend Developer. Create a fully functional interactive quiz application
입력 칸레슨 05 배우기 ›
원문 · 없음바꿔 넣을 자리가 표시돼 있지 않아 쓸 때마다 원문을 직접 고쳐야 했습니다.
개선 · 2개[Insert Quiz Data JSON] · [Difficulty Multiplier]
작업 순서레슨 07 배우기 ›
원문 · 없음작업 순서가 정해져 있지 않아 AI 가 순서를 스스로 정해야 했습니다.
개선 · 4단계
이 개선안에 쓰인 기법 — 프롬프트 클래스에서 배우기
원문
Develop a comprehensive interactive quiz application with HTML5, CSS3 and JavaScript. Create an engaging UI with smooth transitions between questions. Support multiple question types including multiple choice, true/false, matching, and short answer with automatic grading. Implement configurable timers per question with visual countdown. Add detailed score tracking with points based on difficulty and response time. Show a dynamic progress bar indicating completion percentage. Include a review mode to see correct/incorrect answers with explanations after quiz completion. Implement a persistent leaderboard using localStorage. Organize questions into categories with custom icons and descriptions. Support multiple difficulty levels affecting scoring and time limits. Generate a detailed results summary with performance analytics and improvement suggestions. Add social sharing functionality for results with customizable messages.
개선안 · 색칠한 [칸]에 내 내용을 넣어 쓰세요
Act as a Senior Frontend Developer. Create a fully functional interactive quiz application using single-file HTML5, CSS3, and Vanilla JavaScript based on the following specifications: 1. **Data & Config**: Use the schema from `[Insert Quiz Data JSON]` supporting multiple question types (multiple choice, true/false, matching, short answer) across custom categories and difficulty levels. 2. **UI/UX**: Build a modern, responsive layout with smooth question transitions, a dynamic completion progress bar, and a visual countdown timer per question. 3. **Scoring Engine**: Calculate points based on `[Difficulty Multiplier]` and response speed. Persist leaderboard rankings using `localStorage`. 4. **Results & Review**: Display a detailed summary with performance analytics, improvement tips, answer review mode with explanations, and social sharing options. Output complete, fully styled, production-ready code without external dependencies.