master

分支 (1)

管理

管理

master

stu_eng_chart
/
HKJC Diversityform2.html

<!DOCTYPE html>
<!-- saved from url=(0037)http://127.0.0.1:8000/lpp/trainIndex/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <!-- Required meta tags -->

  <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> -->
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

  <link rel="stylesheet" href="./HKJC Diversity Management Platform_files/bootstrap.min.css">
  <link rel="stylesheet" href="./HKJC Diversity Management Platform_files/all.css">
  <link rel="stylesheet" href="./HKJC Diversity Management Platform_files/custom.css">
  <link rel="stylesheet" href="./HKJC Diversity Management Platform_files/custom(1).css">
  <script type="text/javascript" src="./HKJC Diversity Management Platform_files/popper.min.js"></script>
  <script type="text/javascript" src="./HKJC Diversity Management Platform_files/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="./HKJC Diversity Management Platform_files/bootstrap.min.js"></script>
  <!-- <link rel="shortcut icon" href="#"/> -->

<link rel="stylesheet" href="./HKJC Diversity Management Platform_files/mdb.min.css" xmlns="http://www.w3.org/1999/html">
  <script type="text/javascript" src="./HKJC Diversity Management Platform_files/mdb.min.js"></script><style type="text/css">/* Chart.js */
@-webkit-keyframes chartjs-render-animation{from{opacity:0.99}to{opacity:1}}@keyframes chartjs-render-animation{from{opacity:0.99}to{opacity:1}}.chartjs-render-monitor{-webkit-animation:chartjs-render-animation 0.001s;animation:chartjs-render-animation 0.001s;}</style>
  <link rel="stylesheet" href="./HKJC Diversity Management Platform_files/fileUpload.css">
  <script type="text/javascript" src="./HKJC Diversity Management Platform_files/fileUpload.js"></script>
  <script type="text/javascript" src="./HKJC Diversity Management Platform_files/ajaxRefreshDiv.js"></script>

  <title>HKJC Diversity Management Platform</title>

</head>

<body>

<link rel="stylesheet" href="./HKJC Diversity Management Platform_files/all.css">
<link rel="stylesheet" href="./HKJC Diversity Management Platform_files/navbar1.css">
<nav class="main-menu no-print" style="display: none;">

  <ul>
    <li>
      <a href="http://127.0.0.1:8000/home/">
        <i class="fa fa-home fa-2x"></i>
        <span class="nav-text">
            Home
        </span>
      </a>
    </li>


    <li>
      <a href="http://127.0.0.1:8000/students/">
        <i class="fa fa-user fa-2x"></i>
        <span class="nav-text">
            Student
        </span>
      </a>
    </li>


    <li>
      <a href="http://127.0.0.1:8000/students/index_stu/">
        <i class="fa fa-user-plus fa-2x"></i>
        <span class="nav-text">
            Manual Add Student
        </span>
      </a>
    </li>


    <li>
      <a href="http://127.0.0.1:8000/iep/">
        <i class="fa fa-address-book fa-2x"></i>
        <span class="nav-text">
            IEP
        </span>
      </a>
    </li>


    <!-- Temporary disabled -->
    <li>
      <a href="http://127.0.0.1:8000/download/">
        <i class="fa fa-chart-bar fa-2x"></i>
        <span class="nav-text">
            DM Dashboard
        </span>
      </a>
    </li>


    <li>
      <a href="http://127.0.0.1:8000/admin/">
        <i class="fa fa-cog fa-2x"></i>
        <span class="nav-text">
            Admin
        </span>
      </a>
    </li>


    <li>
      <a href="http://127.0.0.1:8000/sla/">
        <i class="fa fa-terminal fa-2x"></i>
        <span class="nav-text">
            SLA
        </span>
      </a>
    </li>


  </ul>
  <ul class="logout">
    <li>
      <a href="http://127.0.0.1:8000/accounts/logout/">
        <i class="fa fa-power-off fa-2x"></i>
        <div class="nav-text d-block px-2">
            Logout
        </div>
        <div class="nav-text d-block px-2">
            sys_admin
        </div>
      </a>
    </li>
  </ul>
</nav>

  <div class="container">


<div class="font-yahai font-standard-size">

		<div class="py-2 col-4"><img src="./HKJC Diversity Management Platform_files/logo.png" alt="School Logo" height="120px"></div>
		<div class="row">
		<div class="col-12">
			<div class="px-4 py-1 h1 bg-color-blue-10 text-white font-weight-bold" style="width:1000px">SEN – student - mining(school) </div>
		</div>
	    </div>
		<div class="py-2 ">
			<button id="back" type="button" style="background-color: #9e9b95; border-radius: 5px; color:white;font-weight:bold; border-style: none; width:120px;height:40px;font-size:20px; " onclick="back_to_selection()">Back</button>
			<button type="button" style="background-color: #9e9b95; border-radius: 5px; color:white;font-weight:bold; border-style: none; width:120px;height:40px;font-size:20px; " onclick="clearall()">Clear</button>
			<button type="button" style="background-color: #ffae00; border-radius: 5px; color:white;font-weight:bold; border-style: none; width:120px;height:40px;font-size:20px; " onclick="next()">Next</button>
			<button type="button" style="background-color: #00c851; border-radius: 5px; color:white;font-weight:bold; border-style: none; width:320px;height:40px;font-size:20px; " onclick="showFileUpload()">Upload Attributes Excel File</button>
			<button type="button" style="background-color: #4285f4; border-radius: 5px; color:white;font-weight:bold; border-style: none; width:400px;height:40px;font-size:20px; " onclick="downloadExcel()">Download Attribute Setting Template</button>
		</div>
		<div class="col-12" id="div_lvl">
			<font style="font-size: 100%"><b>
			 you want to analyize the student <select id="div_lvl_range" style="width: 100px;">

				<option>Chinese</option>
				<option>English</option>
				<option>Maths</option>

				</select> <select id="div_lvl_range" style="width: 100px;">

				<option>paper1</option>
				<option>paper2</option>
				<option>paper3</option>

				</select>performance in
				<select id="div_lvl_range" style="width: 100px;">

					<option>grade1</option>
					<option>grade2</option>
					<option>grade3</option>
					<option>grade4</option>
					<option>grade5</option>
					<option>grade6</option>
				</select>
				since
				<select id="div_year" style="width: 100px; opacity: 1;">
				<option>2019</option>
</select>
				in school

			<br>
		</div>

		<div class="col-lg-1 col-sm-1 col-xs-0"></div>
		<br>


	<div class="row" style="text-align:center">
		<div class="col-4">
			<div class="dashboard-area" style="height:250px">
				<p><strong><b>Depending Attribute (Chinese Subject): </b></strong></p>
				<div id="div_course_selection"></div>
			</div>
		</div>
		<div class="col-4">
			<div class="dashboard-area" style="height:250px">
				<p><strong><b>Depending Attribute (English Subject): </b></strong></p>
				<div id="div_eca_selection"></div>
			</div>
		</div>
		<div class="col-4">
			<div class="dashboard-area" style="height:250px">
				<p><strong><b>Depending Attribute (Maths Subject): </b></strong></p>
				<div id="div_record_selection"></div>
			</div>
		</div>

	</div>

	<div class="row" style="text-align:center">
		<div class="col-4">
			<ul class="iep-index">
				<li class="iep-index">
					<a id="div_course" class="round-btn" href="javascript:void(null);">Click to select Attribute</a>
				</li>
			</ul>
		</div>

		<div class="col-4">
			<ul class="iep-index">
				<li class="iep-index">
					<a id="div_eca" class="round-btn" href="javascript:void(null);">Click to select Attribute</a>
				</li>
			</ul>
		</div>

		<div class="col-4">
			<ul class="iep-index">
				<li class="iep-index">
					<a id="div_record" class="round-btn" href="javascript:void(null);">Click to select Attribute</a>
				</li>
			</ul>
		</div>


	</div>


	<div class="row">
		<div class="col-4">
			<div id="div_course_panel" class="iep-dropdown-list px-3" multiple="multiple">

  <div class="iep-panel-btn " onclick="changeCourse(this);">Annual Avg Score of All Subjects</div>

  <div class="iep-panel-btn " onclick="changeCourse(this);">Chinese</div>

  <div class="iep-panel-btn " onclick="changeCourse(this);">English</div>

  <div class="iep-panel-btn " onclick="changeCourse(this);">Math</div>


			</div>
  		</div>
		<div class="col-4">
			<div id="div_eca_panel" class="iep-dropdown-list">

  <div class="iep-panel-btn " onclick="changeECA(this);">A Part-time Job</div>

  <div class="iep-panel-btn " onclick="changeECA(this);">Academic Teams and Clubs</div>

  <div class="iep-panel-btn " onclick="changeECA(this);">Athletics</div>

  <div class="iep-panel-btn " onclick="changeECA(this);">Culture Clubs</div>

  <div class="iep-panel-btn " onclick="changeECA(this);">Total Num of ECA</div>


			</div>
		</div>
		<div class="col-4">
			<div class="row">
				<div class="col-2"></div>
				<div class="col-10">
					<div id="div_record_panel" class="iep-dropdown-list px-3">

  <div class="iep-panel-btn " onclick="changeRecord(this);">Num of Awards</div>

  <div class="iep-panel-btn " onclick="changeRecord(this);">Num of Punishments</div>

  <div class="iep-panel-btn " onclick="changeRecord(this);">Num of Attendances</div>

  <div class="iep-panel-btn " onclick="changeRecord(this);">Gender</div>

  <div class="iep-panel-btn " onclick="changeRecord(this);">Birthplace</div>

  <div class="iep-panel-btn " onclick="changeRecord(this);">Height</div>


					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- <div class="py-2 " style="height:100px;"></div> -->

	<!-- <div class="col-12">
		<a class="btn btn-success font-weight-bold rounded display-4" href="javascript:showFileUpload()"><i class="h4 pr-3 pt-2 fas fa-file-upload"></i>Upload Attributes Excel File</a>
		<a class="btn btn-info font-weight-bold rounded" href=""><i class="h4 pr-3 pt-2 fas fa-file-download"></i>Download Origin Excel File</a>
	  </div> -->
	<form>
		<div id="file-upload" class="file-upload d-none">
			<div class="excel-upload-wrap">
				<input name="excelFile" class="file-upload-input" type="file" onchange="readURL(this, &#39;/lpp/uploadExcel/&#39;); window.location.reload();" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
				<div class="drag-text">
					<h3>Drag and drop an Excel file here</h3>
				</div>
			</div>
			<div class="file-upload-content">
				<div class="excel-title-wrap">
					<button type="button" onclick="removeUpload();refreshTable();" class="remove-excel"><i class="far fa-file-excel"></i> Update Success: <span class="excel-title">Uploaded Excel</span></button>
				</div>
			</div>
		</div>
	</form>

</div>


  </div>


    <script type="text/javascript" src="./HKJC Diversity Management Platform_files/lpp_ajax_sch_year.js"></script>
    <link rel="stylesheet" href="./HKJC Diversity Management Platform_files/search.css">
	<script type="text/javascript">
		$.ajaxSetup({
		 	 headers: { "X-CSRFToken": 'KzYXBJdgfmw2uu9b0JMk0BtZweGyQbighPa37HHBNTi76knkYDT4TG8lYB7nYwMA' }
		});
	</script>
	<script>
		document.getElementById('div_course').onclick = function(ev) {
			document.getElementById('div_course_panel').classList.toggle('iep-dropdown-list-show');
			document.getElementById('div_eca_panel').classList.remove('iep-dropdown-list-show');
			document.getElementById('div_record_panel').classList.remove('iep-dropdown-list-show');
			// document.getElementById('div_stubg_panel').classList.remove('iep-dropdown-list-show');
			ev.stopPropagation();
		}
      // tooggle the class list div
      	document.getElementById('div_eca').onclick = function(ev) {
			document.getElementById('div_course_panel').classList.remove('iep-dropdown-list-show');
			document.getElementById('div_eca_panel').classList.toggle('iep-dropdown-list-show');
			document.getElementById('div_record_panel').classList.remove('iep-dropdown-list-show');
			// document.getElementById('div_stubg_panel').classList.remove('iep-dropdown-list-show');
			ev.stopPropagation();
		}
		// toggle the course list div
      	document.getElementById('div_record').onclick = function(ev) {
			document.getElementById('div_record_panel').classList.toggle('iep-dropdown-list-show');
			document.getElementById('div_course_panel').classList.remove('iep-dropdown-list-show');
			document.getElementById('div_eca_panel').classList.remove('iep-dropdown-list-show');
			// document.getElementById('div_stubg_panel').classList.remove('iep-dropdown-list-show');
			ev.stopPropagation();
		}

		document.getElementById('div_lvl_range').onclick = function () {
			// start_search('/lpp/getAjaxClasslvl/', $('#div_lvl_range'), {'range': document.getElementById('div_lvl_range').value});
			start_search('/lpp/getAjaxClasslvlPre/', $('#div_lvl_pre'), { 'range': document.getElementById('div_lvl_range').value })
			start_search('/lpp/getAjaxStartYear/', $('#div_year'), { 'range': document.getElementById('div_lvl_range').value })
		}
      // toggle the course list div

	  	function changeECA(field){
			var base = $('#div_eca_selection').text()
			if(base.indexOf(field.innerHTML)!=-1){
				if(base.indexOf('All')==-1)
					base = base.replace(field.innerHTML+",", '')
				else
					base = base.replace(field.innerHTML, '')
				//base = base.replace(",", '')
				$('#div_eca_selection').text(base)
				// console.log(1)
			} else {
				if(base.indexOf('All')==-1){
					if((field.innerHTML).indexOf('All')!=-1){
						base=""
						$('#div_eca_selection').text(base+""+field.innerHTML)
					}
					else{
						$('#div_eca_selection').text( field.innerHTML + "," + base)
					}
					// console.log(2)
				}
			}
			console.log($('#div_eca_selection').text())
		}

		function changeCourse(field){
			var base = $('#div_course_selection').text()
			if(base.indexOf(field.innerHTML)!=-1){
				if(base.indexOf('All')==-1)
					base = base.replace(field.innerHTML + ",", '')
				else
					base = base.replace(field.innerHTML, '')
				$('#div_course_selection').text(base)
				console.log(1)
			} else {
				if(base.indexOf('All')==-1){
					if((field.innerHTML).indexOf('All')!=-1){
						base=""
						$('#div_course_selection').text( base+""+field.innerHTML)
					}
					else{
						$('#div_course_selection').text( field.innerHTML + "," + base)
					}
					console.log(2)
				}
			}
			console.log($('#div_course_selection').text())
		}

		function changeRecord(field){
			var base = $('#div_record_selection').text()
			if(base.indexOf(field.innerHTML)!=-1){
				base = base.replace(field.innerHTML+",", '')
				//base = base.replace(",", '')
				$('#div_record_selection').text(base)
				console.log(1)
			} else {
				if(base.indexOf('All')==-1){
					$('#div_record_selection').text( field.innerHTML + "," + base)
					console.log(2)
				}
			}
			console.log($('#div_record_selection').text())
		}

		function back_to_selection(){
				location.href = "/sla/";
		}

		function example1(){
			var base_subj = $('#div_course_selection').text();
			var base_stubg = $('#div_record_selection').text();

			var subj = ($('#example1_subj').text()).split(",");
			var stubg = ($('#example1_stubg').text()).split(",");

			var subj_="";
			var stubg_="";

			for(x in subj){
				if(base_subj.indexOf(subj[x])==-1){
					subj_=subj[x]+","+subj_
				}
			}
			$('#div_course_selection').text(subj_+  base_subj)

			for(x in stubg){
				if(base_stubg.indexOf(stubg[x])==-1){
					stubg_=stubg[x]+","+stubg_
				}
			}
			$('#div_record_selection').text(stubg_ + base_stubg)
		}
		function example2(){
			var base_eca = $('#div_eca_selection').text()
			var base_subj = $('#div_course_selection').text()

			var subj = ($('#example2_subj').text()).split(",");
			var eca = ($('#example2_eca').text()).split(",");

			var subj_="";
			var eca_="";

			for(x in subj){
				if(base_subj.indexOf(subj[x])==-1)
					subj_=subj[x]+","+subj_
			}
			$('#div_course_selection').text(subj_+  base_subj)

			for(x in eca){
				if(base_eca.indexOf(eca[x])==-1)
					eca_=eca[x]+","+eca_
			}
			$('#div_eca_selection').text(eca_+ base_eca)
		}
		function example3(){
			var base_subj = $('#div_course_selection').text()
			var base_stubg = $('#div_record_selection').text()

			var subj = ($('#example3_subj').text()).split(",");
			var stubg = ($('#example3_stubg').text()).split(",");

			var subj_="";
			var stubg_="";

			for(x in subj){
				if(base_subj.indexOf(subj[x])==-1)
					subj_=subj[x]+","+subj_
			}
			$('#div_course_selection').text(subj_+  base_subj)

			for(x in stubg){
				if(base_stubg.indexOf(stubg[x])==-1)
					stubg_=stubg[x]+","+stubg_
			}
			$('#div_record_selection').text(stubg_ + base_stubg)
		}

		function next(){
			range = document.getElementById('div_lvl_range').value.replace('-', '_')
			year = document.getElementById('div_year').value
			pre_lvl = document.getElementById('div_lvl_pre').value
			pre_sub = document.getElementById('div_pre_sub').value
			pre = pre_lvl + '_' + pre_sub
			par = document.getElementById('div_course_selection').innerHTML.replaceAll(',', '_')
			eca = document.getElementById('div_eca_selection').innerHTML.replaceAll(',', '_')
			attr = document.getElementById('div_record_selection').innerHTML.replaceAll(',', '_')
			if( par && pre_lvl)
				location.href = "/lpp/trainAlgorithm/" + "?range=" + range + '&year=' + year + "&pre=" + pre + "&par=" + par + "&eca=" + eca + "&attr=" + attr
			else{
				alert("Please select depending attributes to train the machine learning model for at - risk student prediction. ")
			}
		}

		function clearall(){
			$('#div_course_selection').text("")
			$('#div_record_selection').text("")
			$('#div_eca_selection').text("")
		}
	</script>
	<script type="text/javascript">
		function showFileUpload(){
			$('#file-upload').toggleClass("d-block animated fadeIn");
		}
	</script>
	<script type="text/javascript">
		function refreshTable(){
			var data = {};
			ajaxRefreshDiv("", data, $('#excelViewerDiv'))
		}
	</script>
	<script type="text/javascript">
		function downloadExcel(){
			window.location = "/lpp/downloadAttrExcel"
		}
	</script>
	<style>
		.dashboard-area{
			position:relative;
			color:#cd4004;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			text-align: center;
		}
	</style>


<div class="hiddendiv common"></div></body></html>