버전(ver)v1.0 페이지코드OQ-001 페이지명문제 관리 — 목록 페이지 개선 이용자관리자 (PC) Description
작성인 작성일2026.05.20 페이지 경로Admin > 학습 컨텐츠 관리 > 문제 관리 (online_quiz - 복사본.html)
1
2
3
■ 요약
  • - 브레드크럼: 관리자 > 학습 컨텐츠 관리 > 문제 관리
  • - 엑셀 내려받기 버튼 추가
  • - 테이블의 "위치" 통합 컬럼을 레벨 / 유닛 / 섹션 / 코너 개별 컬럼으로 분리
  • - 문항수, 최종 수정일 컬럼 추가
  • - 전 컬럼(번호/관리 제외) 정렬 기능 추가
1 액션 버튼 변경
1-1. 추가
  • "📥 엑셀 내려받기" 버튼 추가 (/admin/contents/problem/download-excel)
1-2. 기존 유지
  • "📤 엑셀 업로드" 버튼 유지
  • "📦 압축(ZIP)파일 업로드" 버튼 유지
2 테이블 구조 재설계
2-1. 컬럼 구성 변경
  • 기존: 번호 / 제목 / 유형 / 위치(통합) / 단계 / 생성일 / 관리 (7개)
  • 변경: 번호 / 레벨 / 유닛 / 섹션 / 코너 / 유형 / 문항수 / 생성일 / 최종 수정일 / 관리 (10개)
2-2. 위치 컬럼 분리
  • 기존: "Level 1 → 1. What Is a Family? → Unit Opener → Video → 1. (문항수: 4)" 형태로 한 셀에 통합
  • 변경: 레벨, 유닛, 섹션, 코너 각각 독립 컬럼으로 분리
2-3. 정렬 기능
  • 번호, 관리 컬럼 제외 전 컬럼에 정렬 기능(↕) 추가
  • 정렬 대상: 레벨, 유닛, 섹션, 코너, 유형, 문항수, 생성일, 최종 수정일
  • 기본 정렬: 생성일 내림차순 (↓ 표시)
3 기본 진입 페이지 설정
  • 상단 메뉴에서 "학습 컨텐츠 관리" 클릭 시 디폴트로 문제 관리 페이지로 이동
  • 사이드 메뉴에서 "문제 관리"가 선택된 상태로 표시
버전(ver)v1.0 페이지코드MF-001 페이지명Midterm/Final Tests — 시험 문제 목록 개선 이용자관리자 (PC) Description
작성인 작성일2026.05.20 페이지 경로Admin > 학습 컨텐츠 관리 > 시험 관리 > 중간·기말 테스트 (mftest - 복사본.html)
1
2
3
4
■ 요약
  • - 브레드크럼: 관리자 > 학습 컨텐츠 관리 > Midterm/Final Tests
  • - 기존 "중간 기말 테스트" 페이지를 Midterm/Final Tests로 명칭 변경 (영문화)
  • - 검색 필터에 레벨, Test 유형(Midterm/Final) 필터 추가
  • - 테이블에 문항 번호 컬럼 추가, 전 컬럼 정렬 기능 추가
  • - 엑셀 내려받기, 압축(ZIP)파일 업로드 버튼 추가
  • - 최종 수정일 컬럼 추가, 등록일 명칭을 생성일로 통일
  • - 검색 버튼 옆에 🔄 초기화 버튼 추가
  • - 문제 목록 전체 갯수가 현재는 10개로 잘못 출력되고 있음. 전체 문항 집계수 확인 필요
1 명칭 및 라벨 영문화
1-1. 페이지 타이틀 / 사이드바
  • 페이지 타이틀: "시험 문제 관리" → "Midterm/Final Tests"
  • 사이드바 메뉴: "중간·기말 테스트" → "Midterm/Final Tests"
  • 카드 헤더: "중간, 기말 문제 목록" → "Midterm/Final Tests 문제 목록"
  • 브레드크럼: "중간, 기말 고사" → "Midterm/Final Tests"
1-2. 테이블 컬럼명 변경
  • "중간/기말" → "Test"
  • "문제 제목" → "지시문"
1-3. 데이터 표기 변경
  • 레벨: "2" (숫자만) → "Level 2"
  • 시험 유형: "중간고사" → "Midterm Test"
  • 시험 유형: "기말고사" → "Final Test"
  • 날짜: "2026-04-06T17:16:45" → "2026-04-06 17:16" (ISO → 간결 포맷)
2 검색 필터 개선
2-1. 추가된 필터
  • 레벨 셀렉트: 전체 / Level 1 ~ Level 6
  • Test 셀렉트: 전체 / Midterm Test / Final Test
2-2. 변경된 필터
  • 문제 유형: 빈 동적 로드 → 등록된 유형들로 목록 생성
3 액션 버튼 변경
3-1. 추가
  • "📥 엑셀 내려받기" 버튼 추가 (/admin/contents/test/download-excel)
  • "📦 압축(ZIP)파일 업로드" 버튼 추가
4 테이블 구조 개선
4-1. 컬럼 구성 변경
  • 기존: ID / 레벨 / 중간/기말 / 문제 유형 / 문제 제목 / 스킬 / 등록일 / 관리 (고정 width)
  • 변경: ID / 레벨 / Test / 문항 번호 / 문제 유형 / 지시문 / 스킬 / 생성일 / 최종 수정일 / 관리 (width 자동)
4-2. 정렬 기능 추가
  • ID, 관리 컬럼 제외 전 컬럼에 정렬 기능(↕) 추가
  • 정렬 대상: 레벨, Test, 문항 번호, 문제 유형, 지시문, 스킬, 생성일, 최종 수정일
4-3. 데이터 표시 개선
  • 문제 유형에 badge 스타일 적용 (배경: #e0f7fa, 색상: #00838f)
  • 각 행에 ✏️ 수정 / 🗑️ 삭제 버튼 추가 (기존에는 없었음)
버전(ver)v1.0 페이지코드OQ-002 페이지명문제 수정 — 다중유형 수정 페이지 이용자관리자 (PC) Description
작성인 작성일2026.06.04 페이지 경로Admin > 학습 컨텐츠 관리 > 문제 관리 > 수정 (online_quiz_edit.html)
1
2
3
■ 요약
  • - 브레드크럼: 관리자 > 학습 컨텐츠 관리 > 문제 관리 > 수정
  • - 문제 목록에서 수정 버튼 클릭 시 이동하는 다중유형 문제 수정 페이지
  • - 한 페이지에 여러 문제가 포함된 유형 (예: video_01)
  • - 상단 Sticky Header에 레벨/유닛/섹션/코너/문제유형 셀렉트 배치
  • - Quiz 카드 드래그 순서 변경접기/펼치기 기능
  • - Problem 명칭을 Quiz로 통일
1 Sticky Header
  • 레벨 / 유닛 / 섹션 / 코너 / 문제유형 셀렉트박스 배치
  • 유닛 셀렉트에 순서 번호 표기 (1. What Is a Family? 형태)
  • 스킬 / 지시문 / 문항개수 입력 필드
  • 스크롤 시 상단에 고정(sticky)되어 항상 노출
2 Common Fields
  • 다중유형은 모든 Quiz가 동일한 Common Fields를 공유
  • imgSrc, audioSrc, videoSrc 등 파일 업로드 필드
  • description 등 텍스트 필드
3 Quiz 목록
  • 각 Quiz 카드에 order, textOptions, answer 필드 표시
  • ⠿ 드래그 핸들로 Quiz 순서 변경 가능, 변경 시 order 값 자동 업데이트
  • 카드 접기/펼치기 토글 — 접힌 상태에서 answer 요약 표시
  • 📂 전체 접기/펼치기 버튼으로 일괄 토글
  • ➕ Add Quiz 버튼으로 새 Quiz 추가
  • Quiz Items (Choices) 하위 영역에서 보기 항목 관리
버전(ver)v1.0 페이지코드OQ-003 페이지명문제 수정 — 단일유형 수정 페이지 이용자관리자 (PC) Description
작성인 작성일2026.06.04 페이지 경로Admin > 학습 컨텐츠 관리 > 문제 관리 > 수정 (online_quiz_edit2.html)
1
2
■ 요약
  • - 브레드크럼: 관리자 > 학습 컨텐츠 관리 > 문제 관리 > 수정
  • - 기존 목록에서 개별 행으로 표시되던 단일유형 문항들을 하나로 묶어서 수정하는 페이지
  • - 다중유형과 달리 문항별로 Common Fields가 다를 수 있음
  • - 각 Quiz 카드 안에 자체 Common Fields + Quiz Items (Choices) 포함
  • - 드래그 순서 변경, 접기/펼치기, 전체 접기 기능 동일 적용
1 단일유형 묶음 구조
1-1. 기존 vs 변경
  • 기존: 동일 코너·유형의 단일 문항이 목록에서 개별 행으로 표시 (예: word_01-1이 5행)
  • 변경: 1개 행으로 묶어서 표시하고, 수정 페이지에서 전체 문항을 한 번에 관리
1-2. 문항별 개별 데이터
  • 각 Quiz 카드마다 자체 Common Fields 보유 (imgSrc, audioSrc, answer 등)
  • 다중유형처럼 공통 Common Fields를 공유하지 않음
  • 각 Quiz 카드마다 자체 Quiz Items (Choices) 보유
2 Quiz 카드 기능
  • 접기/펼치기: 헤더 클릭으로 토글, 접힌 상태에서 answer 요약 + choices 수 표시
  • 📂 전체 접기/펼치기 버튼으로 일괄 토글 (문항 10개까지 가능하여 필수)
  • ⠿ 드래그로 Quiz 순서 변경
  • ➕ Add Quiz로 새 문항 추가, ➕ Add Item으로 보기 항목 추가
  • Quiz 삭제 시 문항개수 자동 업데이트
버전(ver)v1.0 페이지코드MF-002 페이지명Midterm/Final Tests — 문제 수정 페이지 이용자관리자 (PC) Description
작성인 작성일2026.06.04 페이지 경로Admin > 학습 컨텐츠 관리 > Midterm/Final Tests > 수정 (mftest_edit.html)
1
2
3
■ 요약
  • - 브레드크럼: 관리자 > 학습 컨텐츠 관리 > Midterm/Final Tests > 수정
  • - Midterm/Final Tests 목록에서 수정 버튼 클릭 시 이동하는 문제 수정 페이지
  • - 문제 관리 수정 페이지와 동일한 UI 패턴 적용
1 Sticky Header
  • 레벨 / Test(Midterm/Final) / 문제유형 셀렉트박스 배치
  • 문제 관리와 달리 유닛/섹션/코너 셀렉트 없음 (시험은 레벨+Test 유형으로 구분)
  • 스킬 / 지시문 / 문항번호 입력 필드
2 Common Fields
  • imgSrc, audioSrc 파일 업로드 필드
  • answer 텍스트 필드
  • 문제 관리 수정 페이지와 동일한 카드 스타일 적용
3 Quiz Items (Choices)
  • 각 Item 카드에 itemOrder, choice 필드 표시
  • ⠿ 드래그 핸들로 Item 순서 변경 가능
  • 카드 접기/펼치기 토글 — 접힌 상태에서 choice 값 요약 표시
  • 📂 전체 접기/펼치기 버튼으로 일괄 토글
  • ➕ Add Item 버튼으로 새 보기 항목 추가
일반 모드
드래그=위치 이동 · 더블클릭=번호 편집 · 우클릭=빠른 삭제
➕ 핀 추가 → 프레임 클릭으로 새 핀 · 🗑️ 핀 삭제 → 핀 클릭으로 삭제
ESC로 추가/삭제 모드 해제