Code - yangart/sejongOn

<!DOCTYPE html> <html lang="ko"> <head> <title>온세종학교</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="Author" content="" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <meta name="format-detection" content="telephone=no" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" /> <link href="/resources/front/site/SITE_00000/css/style.css" rel="stylesheet" />  <script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-3.6.0.min.js"></script> <script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-ui.min.js"></script>   <script src="/resources/front/site/SITE_00000/js/common/vendor/swiper/swiper-bundle.js"></script> <script src="/resources/front/site/SITE_00000/js/common/vendor/etc/jQuery.tagify.min.js"></script>  <script src="/resources/front/site/SITE_00000/js/common/vendor/chart/chart4.3.0.js"></script> <script src="/resources/front/site/SITE_00000/js/common/vendor/chart/chartjs-plugin-datalabels@2.0.js"></script> <script src="/resources/front/site/SITE_00000/js/common/vendor/chart/chartjs-plugin-annotation.js"></script>    <script src="/resources/front/site/SITE_00000/js/_layout.js"></script>     <script src="/resources/front/site/SITE_00000/js/common.js"></script> <script src="/resources/front/site/SITE_00000/js/common-custom.js"></script>  </head> <body> <div class="accessibility"> <a href="#skipToContents" title="콘텐츠를 바로 볼 수 있도록 건너뛰기합니다.">콘텐츠 바로가기</a> </div>  <div class="container">  <header class="site-header"></header> <div class="site-body" id="skipToContents"> <div class="wrap"> <aside class="lnb"></aside> <div class="site-cont"> <ul class="breadcrumb"> <li><a href="#none" class="home">홈</a></li> <li><a href="#none">1depth</a></li> <li><a href="#none">2depth</a></li> </ul> <div class="page-tit-area"> <div class="l-area"> <h2 class="title-xlg">학습활동 보고서</h2> </div> </div> <div class="summary-page"> <div class="l-area"> <div class="img-area"> <img src="/resources/front/site/SITE_00000/images/common/ico-summary/ico-summary-message.svg" alt="" aria-hidden="true"> </div> <div class="txt-area"> <strong class="summary-tit">이용 가이드</strong> <ul class="bullet"> <li>해당 과정 전체의 데이터를 확인할 수 있습니다.</li> <li>학생멤버를 선택하시면 멤버 1명의 데이터를 확인할 수 있습니다.</li> <li>학습활동이 없는 기간이나 항목의 경우 데이터가 조회되지 않을 수 있습니다.</li> <li>데이터는 어제까지(OR 최근) 누적된 내용으로 제공됩니다.</li> </ul> </div> </div> </div> <div class="fnc-extend-area sticky top0"> <div class="extend-filter-area"> <div class="l-area"> <div class="txt-area"> 학생 선택 </div> <select title="학생 선택"> <option value="">전체</option> </select> </div> <div class="r-area"> <div class="txt-area"> 기간 선택 </div> <input type="date" title="시작일자 선택"> <span>-</span> <input type="date" title="종료일자 선택"> <button type="button" class="btn primary">확인</button> </div> </div> </div> <section class="section sm"> <div class="section-tit-area"> <div class="l-area"> <h3 class="title-lg">학습 현황</h3> </div> </div> <div class="chart-summary-list"> <li> <div class="txt-area"> <h4 class="summary-tit">수업 이수율</h4> <div> <a href="#none" class="btn sm primary ico-arrow-right back">GO</a> </div> </div> <div class="chart-area"> <div class="chart"> <canvas id="chart1" class="chart-doughnut"></canvas> <span class="txt">0%</span> </div> </div> </li> <li> <div class="txt-area"> <h4 class="summary-tit">과제 제출률</h4> <div> <a href="#none" class="btn sm primary ico-arrow-right back">GO</a> </div> </div> <div class="chart-area"> <div class="chart"> <canvas id="chart2" class="chart-doughnut"></canvas> <span class="txt">40%</span> </div> </div> </li> <li> <div class="txt-area"> <h4 class="summary-tit">평가 참여율</h4> <div> <a href="#none" class="btn sm primary ico-arrow-right back">GO</a> </div> </div> <div class="chart-area"> <div class="txt-none spacing-none"> <figure> <img src="/resources/front/site/SITE_00000/images/common/common/txt_none.svg" alt="콘텐츠 없음"> </figure> <p>활동 및 분석 데이터가 없습니다.</p> </div> </div> </li> </div> </section> <section class="section-box"> <header class="box-header"> <div class="l-area"> <h3 class="section-box-tit">수업 이수율</h3> </div> </header> <div class="box-body"> <div class="chart-area"> <div class="chart"> <canvas id="courseCompletion" style="max-height: 28rem;"></canvas> </div> </div> </div> </section> <section class="section-box"> <header class="box-header"> <div class="l-area"> <h3 class="section-box-tit">평가별 정답률</h3> </div> </header> <div class="box-body"> <div class="chart-area"> <div class="chart"> <canvas id="evalChart" style="max-height: 28rem;"></canvas> </div> </div> </div> </section> <div class="row"> <section class="section-box"> <header class="box-header"> <div class="l-area"> <h3 class="section-box-tit">문항 난이도별 정답률</h3> </div> </header> <div class="box-body"> <div class="chart-area"> <div class="chart"> <canvas id="quizLevel" style="max-height: 28rem;"></canvas> </div> </div> </div> </section> <section class="section-box"> <header class="box-header"> <div class="l-area"> <h3 class="section-box-tit">제일 많이 틀린 문항</h3> </div> <div class="r-area"> <a href="#none" class="btn sm secondary ico-arrow-right back">문제풀이 결과 바로가기</a> </div> </header> <div class="box-body"> <ul class="chart-bar-list"> <li> <div class="chart-tit-area"> <div class="chart-tit ellipsis">#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역</div> </div> <div class="bar-area"> <span class="bar" style="width:22%;"></span><small class="chart-label">22% 오답률</small> </div> </li> <li> <div class="chart-tit-area"> <div class="chart-tit ellipsis">#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역</div> </div> <div class="bar-area"> <span class="bar" style="width:62%;"></span><small class="chart-label">62% 오답률</small> </div> </li> <li> <div class="chart-tit-area"> <div class="chart-tit ellipsis">#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역</div> </div> <div class="bar-area"> <span class="bar" style="width:22%;"></span><small class="chart-label">22% 오답률</small> </div> </li> <li> <div class="chart-tit-area"> <div class="chart-tit ellipsis">#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역</div> </div> <div class="bar-area"> <span class="bar" style="width:62%;"></span><small class="chart-label">62% 오답률</small> </div> </li> </ul> </div> </section> </div> <div class="btn-cont"> <button class="btn lg">목록</button> <button type="submit" class="btn lg primary">저장</button> </div> </div> </div> </div> <footer class="site-footer"></footer> </div>  <div class="toast"></div>  <div class="dim"></div> <script> $(document).ready(function () { // 학습 현황 createChartDoughnut('chart1', 0, gradientColorPrimary); createChartDoughnut('chart2', 40, gradientColorPrimary); // 수업 이수율 const courseCompletionData = { labels: ['2025-01-01', '2025-01-02', '2025-01-03', '2025-01-04', '2025-01-05'], data: [0, 50, 87, 30, 100], }; createChartBarWidthauto('courseCompletion', courseCompletionData.labels, courseCompletionData.data, null, 65); // 수업 이수율 const evalChartData = { labels: ['2025-01-01', '2025-01-02', '2025-01-03', '2025-01-04', '2025-01-05'], data: [0, 50, 87, 30, 100], }; createChartBarWidthauto('evalChart', evalChartData.labels, evalChartData.data, null, 75); //문항 난이도별 정답률 const quizLevelData = { labels: ['매우쉬움', '쉬움', '보통', '어려움', '매우어려움'], data: [0, 50, 87, 30, 100], }; createChartBar('quizLevel', quizLevelData.labels, quizLevelData.data); }); </script> </body> </html>