호지니

과목별, 주차별로 나눠 둔 시험 대비 문제은행 웹앱입니다.

• 서버 없음. 정적 파일뿐이라 GitHub Pages, Vercel, Netlify 어디든 그대로 올라갑니다.
• AI 없음. 브라우저 안에서 전부 끝나므로 API 키도, 사용 한도도, 비용도 없습니다.
• 폰 브라우저에서 그대로 돌아가고, 한 번 열면 오프라인에서도 동작합니다.
• 링크를 받은 사람은 로그인 없이 바로 봅니다.

---

담긴 과목

과목	주차	형식	출처
콘텐츠서비스디자인	2, 3, 4, 5, 6, 7주차	빈칸	예복습 테스트 시험지 원문
멀티미디어사운드테크닉	2, 3, 5, 6, 7주차	4지선다	강의 PPT, 손필기, 수업 녹음에서 복원한 멘티미터와 카훗 퀴즈
미디어마케팅개론	2, 3, 4, 5, 6주차	빈칸, 사례형 서술	강의 PPT 전문, 손필기 전문
글로벌경영	2, 3, 4, 5, 6, 7주차	4지선다, 서술	강의 PPT 전문, 온라인 강의 녹취 전문, 직접 정리한 예상문제 모범답안 (중간고사는 서술형 4문제 내외)

교수님이 말씀하신 출제 형태에 맞춰 과목마다 형식을 다르게 두었습니다.

미디어마케팅개론은 외울 표와 순서는 빈칸으로, 판단이 필요한 것은 사례형 서술로 나눴습니다. 퍼널은 빈칸을 비워 두고 채우게 하겠다고 하셨으므로 단계 이름과 표의 칸은 전부 빈칸 문항입니다.

---

쓰는 법

메인에서 3학년 2학기 → 중간고사로 들어간 뒤 과목 → 주차 → 문항 수를 고르고 시작하면 됩니다. 폰의 뒤로가기를 누르면 한 단계씩 올라갑니다(문제 화면 → 과목 → 중간고사 → 메인). 푸는 중이면 먼저 물어봅니다. 메인에서 누르면 사이트를 나갑니다. 주차 칩은 여러 개를 동시에 켤 수 있고, 전체를 누르면 그 과목 전 범위입니다.

두 가지 방식이 있습니다.

• 문제 풀기 한 문항씩 적어 보고 확인하는 방식

미디어마케팅개론은 문제 풀기를 누르면 중간고사 암기 문항 여섯 개(퍼널 6단계, 세분화 4기준 두 개, 페르소나 6칸 두 개, 브랜드가 만든 노출과 고객이 만든 노출 비교표)가 고른 주차와 상관없이 항상 맨 앞에 나오고, 나머지가 섞여 나옵니다. 문항 수를 정했으면 이 여섯 개도 그 수에 들어갑니다. 문항에 pin: 1 처럼 번호를 붙이면 이렇게 고정됩니다.

콘텐츠서비스디자인은 주차 아래에 유형 칩이 하나 더 나옵니다. 주차와 유형을 함께 골라 그 범위만 풉니다. 유형은 다섯 가지이고 복습 테스트 원문 49문항은 빠짐없이 순서 및 5개 이상, 목록 쓰기, 서술형 중 하나에 들어 있습니다.

type	칩 이름	내용
abbrKey	[중간]핵심어와 약어	핵심어를 보고 약어를 쓴다
abbrFull	[중간]약어와 약어해석	약어를 보고 풀어 쓴다
order	[중간]순서 및 5개 이상 답변 문제 모음	순서를 묻거나 답이 5개 이상인 원문 문항
list	[중간]목록 쓰기(4개 이하)	순서 없는 4개 이하 목록 원문 문항
essay	[중간]서술형 풀기	문장으로 답하는 원문 문항

약어 문항 30개(id w3-k05, w3-a05 처럼 원래 번호를 따름, tag "암기 약어")은 방호진이 외우려고 요청해 더한 것으로, 원문이 아닙니다. 해설에는 약어와 풀어 쓴 정답, 원래 문제를 함께 적었습니다. 문항에 type 이 하나라도 붙은 과목에만 유형 칩이 나옵니다.

• 문제와 답 한눈에 보기 고른 범위의 문제와 답을 전부 펼쳐 둔 화면

한눈에 보기

풀지 않고 훑는 화면입니다. 순서를 섞지 않고 주차별, 번호순 그대로 나옵니다.

기본은 문제와 정답만 나옵니다. 해설도 없고, 4지선다의 틀린 보기도 없습니다. 시험 직전에 쭉 넘겨 보라고 일부러 촘촘하게 짰습니다.

더 보고 싶으면 위쪽 칩을 켜세요.

• 해설도 보기 를 켜면 문항마다 해설이 붙습니다
• 틀린 보기도 보기 를 켜면 4지선다의 보기 네 개가 다 나옵니다

인쇄 를 누르면 종이에 맞게 다시 짜여 나옵니다. 버튼과 칩은 인쇄되지 않습니다.

채점하지 않습니다

적어 보고 정답 확인 을 누르면 답이 나옵니다. 맞고 틀림을 따지지 않으므로 점수도 정답률도 없습니다. 비워 둔 채 눌러도 됩니다. 답이 안 떠오르면 그냥 확인하고 넘어가세요.

형식별로 확인 화면이 다릅니다.

• 빈칸 : 칸마다 바로 아래에 정답이 붙습니다
• 4지선다 : 정답 보기가 초록으로, 내가 고른 오답이 빨강으로 표시됩니다
• 서술 : 핵심어 목록과 모범답안이 펼쳐집니다. 내가 쓴 글과 견주어 보세요

키보드

키	하는 일
1 2 3 4	4지선다 보기 고르기
Enter	정답 확인, 한 번 더 누르면 다음
← →	이전 문항, 다음 문항

---

오답노트

문항 아래 오답노트로 보내기 를 누르면 그 문항이 담깁니다. 자동으로 담기지 않습니다. 헷갈렸다 싶은 것만 직접 골라 넣는 방식입니다.

담은 뒤 홈으로 나오면 오답노트만 풀기 (N) 버튼이 생깁니다. 오답노트는 과목별로 나뉩니다. 홈에서 고른 과목에 담은 것만 세고 풀고, 오답노트 비우기도 그 과목 것만 비웁니다.

오답노트는 이 기기의 브라우저에만 저장됩니다. 다른 기기로는 넘어가지 않습니다.

---

문항 추가하기

data/<과목키>-w<주차>.js 파일을 만들고 index.html 에 script 태그 한 줄을 더하면 끝입니다.

window.QUIZ_BANK = window.QUIZ_BANK || [];
window.QUIZ_BANK.push({
  subject: "멀티미디어사운드테크닉",   // 화면에 보이는 과목 이름
  subjectKey: "sound",                // 같은 과목끼리 묶는 열쇠
  week: 3,
  title: "샘플링과 양자화",
  items: [ /* 아래 세 형식 중 하나 */ ]
});

형식 1. 빈칸

{
  id: "k3-01", no: "1", tag: "서비스의 속성",
  q: "서비스의 속성 4가지를 쓰시오.",
  blanks: [
    { label: "①", answer: "무형성" },
    { label: "②", answer: "이질성" }
  ],
  layout: "pair",        // 빈칸을 둘씩 묶어 왼쪽 → 오른쪽 한 줄로
  // layout: "vs"        // 둘씩 묶되 화살표 대신 vs 를 넣어 비교표로
  why: "해설. HTML 태그를 써도 됩니다"
}

형식 2. 4지선다

{
  id: "s3-01", no: "1", tag: "데시벨",
  q: "같은 크기의 소리 두 개가 동시에 울리면?",
  choices: ["약 3dB", "약 10dB", "약 20dB", "두 배가 된다"],
  answer: 0,             // 정답의 자리 번호. 0부터 셉니다
  why: "해설"
}

형식 3. 사례형 서술

{
  id: "m3-01", no: "1", tag: "틱톡",
  q: "신제품을 알리려 틱톡을 골랐다. 첫 3초를 어떻게 구성해야 하는가?",
  keys: ["넘기지 않을 이유", "완주", "인지 확산"],   // 핵심어. 스스로 채점할 때 씁니다
  model: "모범답안 전문",
  why: "해설"
}

blanks 가 있으면 빈칸, choices 가 있으면 4지선다, 둘 다 없으면 서술로 자동 판별합니다.

---

파일 구조

index.html            화면 뼈대와 script 태그 목록
assets/app.js         과목과 주차 고르기, 세 가지 렌더러, 한눈에 보기, 오답노트
assets/style.css      색 토큰과 화면 스타일. 다크 모드 포함
data/konseo-w02.js    콘텐츠서비스디자인 2주차
data/konseo-w03.js    콘텐츠서비스디자인 3주차
data/konseo-w04.js    콘텐츠서비스디자인 4주차
data/konseo-w05.js    콘텐츠서비스디자인 5주차
data/konseo-w06.js    콘텐츠서비스디자인 6주차
data/konseo-w07.js    콘텐츠서비스디자인 7주차
data/sound-w02.js     멀티미디어사운드테크닉 2주차
data/sound-w03.js     멀티미디어사운드테크닉 3주차
data/sound-w05.js     멀티미디어사운드테크닉 5주차
data/sound-w06.js     멀티미디어사운드테크닉 6주차
data/sound-w07.js     멀티미디어사운드테크닉 7주차
data/media-w02.js     미디어마케팅개론 2주차
data/media-w03.js     미디어마케팅개론 3주차
data/media-w04.js     미디어마케팅개론 4주차
data/media-w05.js     미디어마케팅개론 5주차
data/media-w06.js     미디어마케팅개론 6주차
data/global-w02.js    글로벌경영 2주차
data/global-w03.js    글로벌경영 3주차
data/global-w04.js    글로벌경영 4주차
data/global-w05.js    글로벌경영 5주차
data/global-w06.js    글로벌경영 6주차
data/global-w07.js    글로벌경영 7주차

로컬에서 열기

python -m http.server 8731

그 뒤 브라우저에서 http://127.0.0.1:8731 로 들어가면 됩니다.