85 lines
2.8 KiB
PHP
85 lines
2.8 KiB
PHP
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<?php include(__DIR__ . "/_include/_head.php") ?>
|
|
</head>
|
|
<body>
|
|
<div class="wrap lessons">
|
|
<?php include(__DIR__ . "/_include/_header.php") ?>
|
|
|
|
<div class="container">
|
|
<div class="lessons-wrap">
|
|
<div class="page-title">
|
|
<h3><em>홍길동 선임연구원님</em></h3>
|
|
<p>
|
|
<em>D-66<small>(3월 20일)</small> 까지 필수 콘텐츠</em> 시청을
|
|
완료해주세요.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="lessons-area">
|
|
<div class="lessons-gauge">
|
|
<!-- Start-line: 학습 목록이 있으면 자동으로 on 이미지로 변경됨 -->
|
|
<div class="start-line">
|
|
<img
|
|
src="/img/learning/img_start_off.svg"
|
|
alt="start"
|
|
/>
|
|
</div>
|
|
<?php include(__DIR__ . "/learning_svg.php") ?>
|
|
|
|
<!-- 마커 컨테이너 -->
|
|
<div id="markers-container"></div>
|
|
|
|
<!-- 챕터 카드 컨테이너 (JavaScript에서 동적 생성) -->
|
|
<ul class="chapter-list"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- HTML에서 completed 값 설정 (config.js 로드 전에 설정) -->
|
|
<script>
|
|
|
|
|
|
// 예시: 챕터 1의 모든 레슨을 완료 상태로 설정
|
|
window.learningConfigData = {
|
|
1: {
|
|
completed: true, // 챕터 1 자체 완료
|
|
lessons: [
|
|
{ completed: true },
|
|
{ completed: true },
|
|
{ completed: true },
|
|
{ completed: true },
|
|
{ completed: true },
|
|
{ completed: true },
|
|
{ completed: true },
|
|
{ completed: true },
|
|
],
|
|
},
|
|
2: {
|
|
completed: true, // 챕터 2 자체 완료
|
|
lessons: [{ completed: true }, { completed: true }],
|
|
},
|
|
4: {
|
|
completed: true, // 챕터 3 자체 완료
|
|
lessons: [{ completed: true }, { completed: true }],
|
|
},
|
|
5: {
|
|
completed: true, // 챕터 3 자체 완료
|
|
lessons: [{ completed: true }, { completed: true },{ completed: true }, { completed: true },{ completed: true }, { completed: true }],
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<!-- 학습 페이지 스크립트 (의존성 순서 유지하며 defer로 비동기 로드) -->
|
|
<script src="/js/learning/config.js" defer></script>
|
|
<script src="/js/learning/gauge.js" defer></script>
|
|
<script src="/js/learning/markers.js" defer></script>
|
|
<script src="/js/learning/chapter-cards.js" defer></script>
|
|
<script src="/js/learning/progress-indicator.js" defer></script>
|
|
<script src="/js/learning/modal.js" defer></script>
|
|
<script src="/js/learning/main.js" defer></script>
|
|
</body>
|
|
</html>
|