File name
Commit message
Commit date
09-29
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<!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">
<!-- 공통 plugin -->
<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>
<!-- //공통 plugin -->
<!-- 페이지 plugin-->
<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>
<!-- //페이지 plugin-->
<!-- 공통 퍼블 layout: 개발시 삭제-->
<script src="/resources/front/site/SITE_00000/js/_layout.js"></script>
<!--//퍼블 layout-->
<!-- 공통 메뉴 js-->
<!-- //공통 메뉴 js -->
<!--공통 퍼블 js-->
<script src="/resources/front/site/SITE_00000/js/common.js"></script>
<script src="/resources/front/site/SITE_00000/js/common-custom.js"></script>
<!--//공통 퍼블 js-->
</head>
<body>
<div class="accessibility">
<a href="#skipToContents" title="콘텐츠를 바로 볼 수 있도록 건너뛰기합니다.">콘텐츠 바로가기</a>
</div>
<!-- for-teacher / for-student -->
<div class="container">
<!-- 통합 헤더 및 네비게이션 -->
<header class="site-header"></header>
<div class="site-body" id="skipToContents">
<div class="wrap">
<div class="page-tit-area">
<div class="l-area">
<h2 class="title-xlg">우리반 성장기록</h2>
</div>
</div>
<ul class="tabs-nav-lg">
<li><a href="#none">우리반 학습분석</a></li>
<li><a href="#none">학생 오답노트</a></li>
<li><a href="#none" class="is-active">클래스별 학습분석</a></li>
</ul>
<h3 class="txt-hide">클래스별 학습분석</h3>
<div class="sticky-area">
<div class="fnc-extend-area sticky top0">
<div class="extend-filter-area">
<div class="l-area">
<fieldset class="filter-group">
<legend class="filter-title">기간 선택</legend>
<div class="checkradio">
<input type="radio" name="period" id="periodMonth" checked>
<label for="periodMonth">월별로 보기</label>
<div class="checkradio-option">
<select title="월별 보기 선택">
<option value="">2024년 12월</option>
</select>
</div>
</div>
<div class="checkradio">
<input type="radio" name="period" id="periodWeek">
<label for="periodWeek">주별로 보기</label>
<div class="checkradio-option">
<input type="date" >
<span>-</span>
<input type="date">
<button type="button" class="btn primary">확인</button>
</div>
</div>
</fieldset>
</div>
<div class="r-area">
<select title="클래스 선택">
<option>클래스명</option>
</select>
</div>
</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-section-area dir-row">
<div class="chart-section">
<a href="#none" class="lnk-full">상세보기</a>
<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">
<a href="#none" class="lnk-full">상세보기</a>
<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">
<a href="#none" class="lnk-full">상세보기</a>
<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>
<ul class="tabs-nav">
<li><a href="#none">수업</a></li>
<li><a href="#none" class="is-active">과제</a></li>
<li><a href="#none">평가</a></li>
<li><a href="#none">커뮤니티</a></li>
</ul>
<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="classStudy" style="max-height: 28rem;"></canvas>
</div>
</div>
</div>
</section>
<section class="section-box bg">
<header class="box-header">
<div class="l-area">
<h3 class="section-box-tit">학생들 현황</h3>
</div>
<div class="r-area">
<button type="button" class="btn sm secondary">학습 상태별 학생 현황 보기</button>
</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">과제 제출률이 <em class="secondary">높은</em> 학생</h4>
</div>
</header>
<div class="box-body">
<ul class="item-num-list">
<li>
<span class="label num success">1</span>
<div class="txt-area">
<p>홍길동</p>
</div>
<div class="fnc">
<strong>15개</strong>
</div>
</li>
<li>
<span class="label num success">2</span>
<div class="txt-area">
<p>홍길동</p>
</div>
<div class="fnc">
<strong>15개</strong>
</div>
</li>
<li>
<span class="label num success">3</span>
<div class="txt-area">
<p>홍길동</p>
</div>
<div class="fnc">
<strong>15개</strong>
</div>
</li>
</ul>
</div>
</article>
<article class="article-box">
<header class="box-header">
<div class="l-area">
<h4 class="article-tit">과제 제출률이 <em class="accent">낮은</em> 학생</h4>
</div>
</header>
<div class="box-body">
<ul class="item-num-list">
<li>
<span class="label num danger">1</span>
<div class="txt-area">
<p>홍길동</p>
</div>
<div class="fnc">
<strong>15개</strong>
</div>
</li>
<li>
<span class="label num danger">2</span>
<div class="txt-area">
<p>홍길동</p>
</div>
<div class="fnc">
<strong>15개</strong>
</div>
</li>
<li>
<span class="label num danger">3</span>
<div class="txt-area">
<p>홍길동</p>
</div>
<div class="fnc">
<strong>15개</strong>
</div>
</li>
</ul>
</div>
</article>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<!-- toast -->
<div class="toast"></div>
<!--popup-->
<div class="dim"></div>
<script>
$(document).ready(function () {
//클래스 활동 분석 chart
createChartDoughnut('chartActivity1', 45, gradientColorPrimary);
createChartDoughnut('chartActivity2', 50, gradientColorSecondary);
createChartDoughnut('chartActivity3', 50, gradientColorAccent);
//수업이수율
const classStudyData = {
labels: ['01-01(1)', '01-02(2)', '01-03', '01-04', '01-05', '01-01', '01-02', '01-03', '01-04', '01-05',
'01-03', '01-04', '01-05', '01-01', '01-02', '01-03', '01-04', '01-05',
'01-03', '01-04', '01-05', '01-01', '01-02', '01-03', '01-04', '01-05',
'01-03', '01-04', '01-05', '01-01', '01-02', '01-03', '01-04', '01-05',
'01-03', '01-04', '01-05', '01-01', '01-02', '01-03', '01-04', '01-05',
'01-03', '01-04', '01-05', '01-01', '01-02', '01-03', '01-04', '01-05',
'01-03', '01-04', '01-05', '01-01', '01-02', '01-03', '01-04', '01-05',
'01-03', '01-04', '01-05', '01-01', '01-02', '01-03', '01-04', '01-05',
'01-03', '01-04', '01-05', '01-01', '01-02', '01-03', '01-04', '01-05',
'01-03', '01-04', '01-05', '01-01', '01-02', '01-03', '01-04', '01-05',
'01-03', '01-04', '01-05', '01-01', '01-02', '01-03', '01-032', '01-031',
],
data: [
10, 50, 87, 30, 100, 100, 50, 87, 30, 100, 20, 50, 87, 30, 100,
0, 50, 87, 30, 100, 0, 50, 87, 30, 100,0, 50, 87, 30, 100,
0, 50, 87, 30, 100,0, 50, 87, 30, 100,0, 50, 87, 30, 100,
0, 50, 87, 30, 100,0, 50, 87, 30, 100,0, 50, 87, 30, 100,
0, 50, 87, 30, 100,0, 50, 87, 30, 100,0, 50, 87, 30, 100,
0, 50, 87, 30, 100,0, 50, 87, 30, 100,0, 50, 87, 30, 100
],
};
createChartBarWidthauto('classStudy', classStudyData.labels, classStudyData.data, classStudyClick, 40);
function classStudyClick(event, elements, labels, data) {
const datasetIndex = elements[0].datasetIndex;
const dataIndex = elements[0].index;
const label = labels[dataIndex];
const value = data[dataIndex];
alert(`클릭한 항목: ${label}\n값: ${value}%`);
}
window.classStudyClick = classStudyClick;
});
</script>
</body>
</html>