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"> <link href="/resources/front/site/SITE_00000/css/print/print.css" rel="stylesheet"> <link href="/resources/front/site/SITE_00000/css/style.css" rel="stylesheet"> <style> .print-section { zoom: .8; } .row { margin-bottom: 1.2rem; } .section-box, .article-box { break-inside: avoid; margin-bottom: 1.2rem; padding:1.6rem; } .section-box .emotion-swiper { padding:0; width:50%; } .point-item { width: 50%; } </style> </head> <body> <div class="print-page"> <div class="print-box analytics-area"> <div class="print-header"> <div class="print-page-tit-area"> <div class="l-area"> <h1 class="print-title-xlg">3학년 5반 15번 김채움 학습분석</h1> </div> <div class="r-area"> <p class="print-time">출력일: 2022.10.30.</p> </div> </div> </div> <div class="print-section"> <div class="print-tit-area"> <div class="l-area"> <h2 class="print-title-lg">나의요약</h2> </div> </div> <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="chart-box"> <div class="swiper emotion-swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="emotion-item"> <div class="img-area"> <figure> <img src="/resources/front/site/SITE_00000/images/common/ico-img/ico-img-grinningface.svg" alt="기뻐요"> </figure> </div> <div class="txt-area"> <strong>기뻐요</strong> <small>2025-12-02(월)</small> </div> </div> </div>  </div>  </div> <div class="cont"> <ul class="chart-info-list"> <li> <div class="l-area"> <span class="legend lg"><i class="green"></i> 긍정</span> </div> <div class="r-area"> <span><strong class="data">28</strong>회</span> </div> </li> <li> <div class="l-area"> <span class="legend lg"><i class="orange"></i> 부정</span> </div> <div class="r-area"> <span><strong class="data">28</strong>회</span> </div> </li> </ul> </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="chart-box"> <div class="point-item"> <div class="txt-area"> <strong>기간동안 적립한 땅콩</strong> <em class="accent">123개</em> </div> </div> <div class="cont"> <ul class="item-txt-list"> <li> <div class="txt-area"> <strong>총 땅콩수</strong> </div> <div class="fnc"> <em class="accent">221 개</em> </div> </li> <li> <div class="txt-area"> <strong>공부한 과목/학습수준</strong> </div> <div class="fnc"> 국어(쉬움), 영어(보통), 수학(어려움), 과학(보통), 사회(쉬움) </div> </li> </ul> </div> </div> </section> </div> <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-section-area"> <div class="chart-section"> <div class="txt-area"> <h4>수업 이수율</h4> <p>45%</p> </div> <div class="chart-area"> <div class="chart"> <canvas id="chartActivity1"></canvas> </div> </div> </div> <div class="chart-section"> <div class="txt-area"> <h4>과제 제출율</h4> <p>45%</p> </div> <div class="chart-area"> <div class="chart"> <canvas id="chartActivity2"></canvas> </div> </div> </div> <div class="chart-section"> <div class="txt-area"> <h4>평가 풀이율</h4> <p>45%</p> </div> <div class="chart-area"> <div class="chart"> <canvas id="chartActivity3"></canvas> </div> </div> </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"> <ul class="item-num-list"> <li> <span class="label num">1</span> <div class="txt-area"> <p>분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수분수</p></div> </li> <li> <span class="label num">2</span> <div class="txt-area"><p>분수</p></div> </li> <li> <span class="label num">3</span> <div class="txt-area"><p>분수</p></div> </li> <li> <span class="label num">4</span> <div class="txt-area"><p>분수</p></div> </li> <li> <span class="label num">5</span> <div class="txt-area"><p>분수</p></div> </li> <li> <span class="label num">6</span> <div class="txt-area"><p>분수</p></div> </li> <li> <span class="label num">7</span> <div class="txt-area"><p>분수</p></div> </li> <li> <span class="label num">8</span> <div class="txt-area"><p>분수</p></div> </li> <li> <span class="label num">9</span> <div class="txt-area"><p>분수</p></div> </li> <li> <span class="label num">10</span> <div class="txt-area"><p>분수</p></div> </li> </ul> </div> </section> </div> <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-box"> <div class="chart-area" style="width: 60%;"> <div class="chart-bar-stack"> <span class="bar blue" style="width:30%;">채움클래스 30%</span> <span class="bar yellow" style="width:20%;">콘텐츠 20%</span> <span class="bar pink" style="width:30%;">기초학력진단 30%</span> <span class="bar green" style="width:20%;">진로진학 20%</span> </div> </div> <div class="cont"> <ul class="chart-info-list"> <li> <div class="l-area"> <span class="legend lg"><i class="blue"></i> 채움클래스</span> </div> <div class="r-area"> <span><strong class="data">30</strong>%</span> </div> </li> <li> <div class="l-area"> <span class="legend lg"><i class="yellow"></i> 콘텐츠</span> </div> <div class="r-area"> <span><strong class="data">20</strong>%</span> </div> </li> <li> <div class="l-area"> <span class="legend lg"><i class="pink"></i> 기초학력진단</span> </div> <div class="r-area"> <span><strong class="data">30</strong>%</span> </div> </li> <li> <div class="l-area"> <span class="legend lg"><i class="green"></i> 진로진학</span> </div> <div class="r-area"> <span><strong class="data">20</strong>%</span> </div> </li> </ul> </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"> <span>기초학력명</span> </div> </header> <div class="box-body"> <div class="chart-area"> <div class="chart"> <canvas id="basictestSubject" style="max-height: 28rem;"></canvas> </div> </div> </div> </section> <div class="row"> <section class="section-box bg"> <header class="box-header"> <div class="l-area"> <h3 class="section-box-tit">채움책방</h3> </div>  </header> <div class="box-body"> <div class="box-row"> <article class="article-box"> <header class="box-header"> <div class="l-area"> <h4 class="article-tit">우리반 학생들이 많이 읽은 책</h4> </div> </header> <div class="box-body"> <div class="book-item"> <div class="img-area"> <figure> <img src="/resources/front/site/SITE_00000/images/temp/img1.jpg" alt=""> </figure> </div> <div class="txt-area"> <strong>책제목책제목책제목책제목책제목책제목</strong> <small>정완상</small> </div> </div> </div> </article> <article class="article-box"> <header class="box-header"> <div class="l-area"> <h4 class="article-tit">우리반 독서왕</h4> </div> </header> <div class="box-body"> <div class="user-item"> <div class="profile xlg"> <i class="ico-img-master lg" aria-hidden="true"></i> <div class="img-area"> <figure> <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일"> </figure> </div> <div class="txt-area"> <strong class="profile-tit">학생명</strong> </div> </div> <div class="txt-area"> <em class="user-item-tit">5권</em> </div> </div> </div> </article> </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="list-type sm"> <table> <caption>진로학습 상담신청 이력으로 번호, 학생, 상태, 날짜로 구성되어 있습니다.</caption> <colgroup> <col style="width: 12%;"> <col style="width: 28%;"> <col> <col style="width: 24%;">  </colgroup> <thead> <tr> <th scope="col">번호</th> <th scope="col">학생</th> <th scope="col">상태</th> <th scope="col">날짜</th>  </tr> </thead> <tbody> <tr> <td>1</td> <td>3학년 1반 01번 김채움</td> <td><span class="label-state info">상담신청</span></td> <td>2025-02-20</td>  </tr> <tr> <td>1</td> <td>3학년 1반 01번 김채움</td> <td><span class="label-state success">상담완료</span></td> <td>2025-02-20</td>  </tr> <tr> <td>1</td> <td>3학년 1반 01번 김채움</td> <td><span class="label-state info">상담신청</span></td> <td>2025-02-20</td> </tr> <tr> <td>1</td> <td>3학년 1반 01번 김채움</td> <td><span class="label-state success">상담완료</span></td> <td>2025-02-20</td>  </tr> <tr> <td>1</td> <td>3학년 1반 01번 김채움</td> <td><span class="label-state info">상담신청</span></td> <td>2025-02-20</td>  </tr> </tbody> </table> </div> </div> </section> </div> </div> </div> <div class="print-box analytics-area"> <div class="print-section"> <div class="print-tit-area"> <div class="l-area"> <h2 class="print-title-lg">교과목별 분석</h2> </div> </div> <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-box"> <div class="chart-area" style="width: 60%;"> <div class="chart-bar-stack"> <span class="bar blue" style="width:30%;">국어 30%</span> <span class="bar yellow" style="width:20%;">영어 20%</span> <span class="bar pink" style="width:30%;">수학 30%</span> <span class="bar green" style="width:10%;">사회 10%</span> <span class="bar violet" style="width:10%;">과학 20%</span> </div> </div> <div class="cont"> <ul class="chart-info-list"> <li> <div class="l-area"> <span class="legend lg"><i class="blue"></i> 국어</span> </div> <div class="r-area"> <span><strong class="data">30</strong>%</span> </div> </li> <li> <div class="l-area"> <span class="legend lg"><i class="yellow"></i> 영어</span> </div> <div class="r-area"> <span><strong class="data">20</strong>%</span> </div> </li> <li> <div class="l-area"> <span class="legend lg"><i class="pink"></i> 수학</span> </div> <div class="r-area"> <span><strong class="data">30</strong>%</span> </div> </li> <li> <div class="l-area"> <span class="legend lg"><i class="green"></i> 사회</span> </div> <div class="r-area"> <span><strong class="data">10</strong>%</span> </div> </li> <li> <div class="l-area"> <span class="legend lg"><i class="violet"></i> 과학</span> </div> <div class="r-area"> <span><strong class="data">10</strong>%</span> </div> </li> </ul> </div> </div> </div> </section> </div> <div class="print-section"> <div class="print-tit-area"> <div class="l-area"> <h2 class="print-title">국어</h2> </div> </div> <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> </header> <div class="box-body"> <div class="chart-area"> <div class="chart-legend"> <div class="r-area"> <div class="legend-area"> <span class="legend"><i class="primary"></i>학습자</span> <span class="legend"><i class="secondary"></i>학급평균</span> </div> </div> </div> <div class="chart" style="max-width: 70%; margin:0 auto;"> <canvas id="studyAnaly"></canvas> </div> </div> </div> </section> </div> <section class="section-box"> <header class="box-header"> <div class="l-area"> <h3 class="section-box-tit">영역별 정답률</h3> </div> </header> <div class="box-body"> <ul class="chart-bar-list"> <li> <div class="chart-tit-area"> <div class="chart-tit">수와 연산</div> </div> <div class="bar-area"> <button type="button" class="bar" style="width:22%;">22%</button><small class="chart-label">22%</small> </div> </li> <li> <div class="chart-tit-area"> <div class="chart-tit">변화와 관계</div> </div> <div class="bar-area"> <button type="button" class="bar" style="width:100%;">100%</button><small class="chart-label">100%</small> </div> </li> <li> <div class="chart-tit-area"> <div class="chart-tit">수와 연산</div> </div> <div class="bar-area"> <button type="button" class="bar" style="width:22%;">22%</button><small class="chart-label">22%</small> </div> </li> <li> <div class="chart-tit-area"> <div class="chart-tit">변화와 관계</div> </div> <div class="bar-area"> <button type="button" class="bar" style="width:50%;">50%</button><small class="chart-label">50%</small> </div> </li> </ul> </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-legend"> <div class="r-area"> <div class="legend-area"> <span class="legend"><i class="yellow"></i> 매우쉬움</span> <span class="legend"><i class="green"></i>쉬움</span> <span class="legend"><i class="blue"></i>보통</span> <span class="legend"><i class="pink"></i> 어려움</span> <span class="legend"><i class="violet"></i> 매우 어려움</span> </div> </div> </div> <div class="chart-area"> <div class="chart"> <canvas id="periodAnswer" style="max-height: 28rem;"></canvas> </div> </div> </div> </section> </div> <div class="print-section"> <div class="print-tit-area"> <div class="l-area"> <h2 class="print-title">수학</h2> </div> </div> <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="quizLevel2" 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-legend"> <div class="r-area"> <div class="legend-area"> <span class="legend"><i class="primary"></i>학습자</span> <span class="legend"><i class="secondary"></i>학급평균</span> </div> </div> </div> <div class="chart" style="max-width: 70%; margin:0 auto;"> <canvas id="studyAnaly2"></canvas> </div> </div> </div> </section> </div> <section class="section-box"> <header class="box-header"> <div class="l-area"> <h3 class="section-box-tit">영역별 정답률</h3> </div> </header> <div class="box-body"> <ul class="chart-bar-list"> <li> <div class="chart-tit-area"> <div class="chart-tit">수와 연산</div> </div> <div class="bar-area"> <button type="button" class="bar" style="width:22%;">22%</button><small class="chart-label">22%</small> </div> </li> <li> <div class="chart-tit-area"> <div class="chart-tit">변화와 관계</div> </div> <div class="bar-area"> <button type="button" class="bar" style="width:100%;">100%</button><small class="chart-label">100%</small> </div> </li> <li> <div class="chart-tit-area"> <div class="chart-tit">수와 연산</div> </div> <div class="bar-area"> <button type="button" class="bar" style="width:22%;">22%</button><small class="chart-label">22%</small> </div> </li> <li> <div class="chart-tit-area"> <div class="chart-tit">변화와 관계</div> </div> <div class="bar-area"> <button type="button" class="bar" style="width:50%;">50%</button><small class="chart-label">50%</small> </div> </li> </ul> </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-legend"> <div class="r-area"> <div class="legend-area"> <span class="legend"><i class="yellow"></i> 매우쉬움</span> <span class="legend"><i class="green"></i>쉬움</span> <span class="legend"><i class="blue"></i>보통</span> <span class="legend"><i class="pink"></i> 어려움</span> <span class="legend"><i class="violet"></i> 매우 어려움</span> </div> </div> </div> <div class="chart-area"> <div class="chart"> <canvas id="periodAnswer2" style="max-height: 28rem;"></canvas> </div> </div> </div> </section> </div> </div> <div class="print-box analytics-area"> <div class="print-section"> <div class="print-tit-area"> <div class="l-area"> <h2 class="print-title-lg">선생님 의견</h2> </div> </div> <div class="print-border-box"> 선생님 의견내용 선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용선생님 의견내용 </div> </div> </div> </div> <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/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/common/vendor/swiper/swiper-bundle.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>   <script> $(document).ready(function () { // 나의요약 //클래스 활동 분석 chart createChartDoughnut('chartActivity1', 45, gradientColorPrimary); createChartDoughnut('chartActivity2', 50, gradientColorSecondary); createChartDoughnut('chartActivity3', 50, gradientColorAccent); //기초학력진단 과목별 도달율 const basictestSubjectData = { labels: ['국어(가형)', '영어(가형)', '수학(가형)', '사회(가형)', '과학(나형)'], data: [0, 50, 87, 30, 100], }; createChartBar('basictestSubject', basictestSubjectData.labels, basictestSubjectData.data); //교과목별 분석 (국어) //문항 난이도별 정답률 const quizLevelData = { labels: ['매우쉬움', '쉬움', '보통', '어려움', '매우어려움'], data: [0, 50, 87, 30, 100], }; createChartBar('quizLevel', quizLevelData.labels, quizLevelData.data); //학습 분석 const studyAnalyData = { labels: ['학습충실도', '학업성취도', '학업적극성', '학습집중도', '학습만족도'], dataSets: [ [0, 20, 40, 40, 50], [40, 25, 50, 30, 10], ], legends: ['학습자', '학급평균'], colors: [ gradientColorPrimary, // 보통 gradientColorSecondary, // 쉬움 ], }; createChartRadar('studyAnaly', studyAnalyData.labels, studyAnalyData.dataSets, studyAnalyData.legends, studyAnalyData.colors); //기간별 정답률 추이 const periodAnswerData = { labels: ['01-21', '01-22', '01-23', '01-24', '01-25'], dataSets: [ [0, 20, 40, 40, 50], // 매우 쉬움 [15, 25, 50, 30, 55], // 쉬움 [20, 100, 40, 0, 60], // 보통 [25, 35, 80, 55, 65], // 어려움 [30, 40, 10, 10, 70], // 매우 어려움 ], legends: ['매우 쉬움', '쉬움', '보통', '어려움', '매우 어려움'], colors: [ gradientColorYellow, // 매우 쉬움 gradientColorGreen, // 쉬움 gradientColorBlue, // 보통 gradientColorPink, // 어려움 gradientColorViolet // 매우 어려움 ], }; createChartLine('periodAnswer', periodAnswerData.labels, periodAnswerData.dataSets, periodAnswerData.legends, periodAnswerData.colors); //교과목별 분석 (수학) //문항 난이도별 정답률 const quizLevelData2 = { labels: ['매우쉬움', '쉬움', '보통', '어려움', '매우어려움'], data: [0, 50, 87, 30, 100], }; createChartBar('quizLevel2', quizLevelData2.labels, quizLevelData2.data); //학습 분석 const studyAnalyData2 = { labels: ['학습충실도', '학업성취도', '학업적극성', '학습집중도', '학습만족도'], dataSets: [ [0, 20, 40, 40, 50], [40, 25, 50, 30, 10], ], legends: ['학습자', '학급평균'], colors: [ gradientColorPrimary, // 보통 gradientColorSecondary, // 쉬움 ], }; createChartRadar('studyAnaly2', studyAnalyData2.labels, studyAnalyData2.dataSets, studyAnalyData2.legends, studyAnalyData2.colors); //기간별 정답률 추이 const periodAnswerData2 = { labels: ['01-21', '01-22', '01-23', '01-24', '01-25'], dataSets: [ [0, 20, 40, 40, 50], // 매우 쉬움 [15, 25, 50, 30, 55], // 쉬움 [20, 100, 40, 0, 60], // 보통 [25, 35, 80, 55, 65], // 어려움 [30, 40, 10, 10, 70], // 매우 어려움 ], legends: ['매우 쉬움', '쉬움', '보통', '어려움', '매우 어려움'], colors: [ gradientColorYellow, // 매우 쉬움 gradientColorGreen, // 쉬움 gradientColorBlue, // 보통 gradientColorPink, // 어려움 gradientColorViolet // 매우 어려움 ], }; createChartLine('periodAnswer2', periodAnswerData2.labels, periodAnswerData2.dataSets, periodAnswerData2.legends, periodAnswerData2.colors); }); // window.onload = function () { // //프린트 열기 // window.print(); // //프린트 화면 닫기 // window.onafterprint = function () { // self.opener = self; // window.close(); // } // }; </script> </body> </html>