<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.11/adapters/standalone-framework.src.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.18.10/jquery.URI.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="theme.css" rel="stylesheet" type="text/css"><!-- The overlay -->
<title></title>
</head>
<body>
<div class="overlay" id="myNav">
<!-- Button to close the overlay navigation -->
<a class="closebtn" href="javascript:void(0)" onclick="closeNav()">×</a> <!-- Overlay content -->
<div class="overlay-content">
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="card" style="width: 100rem;">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade in" id="attendance-tab" role="tabpanel">
<!-- Attendance Chart -->
<div class="box-chart text-center gradebook-chart-area" id="box-attendance-chart" style="display: block;">
<h3 title="Today: 15/05/2017"><strong>Total attendance to date: 47%</strong></h3>
<p class="msg"></p>
<div id="atten-render">
<div data-highcharts-chart="0" id="attenChart" style="height: 150px; margin-left: 100px; position: relative;">
<div class="highcharts-container" id="highcharts-jshwdmt-0" style="position: relative; overflow: hidden; width: 694px; height: 150px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<svg class="highcharts-root" height="150" style="font-family:" version="1.1" viewbox="0 0 694 150" width="694" xmlns="http://www.w3.org/2000/svg">
<desc>
Created with Highcharts 5.0.11
</desc>
<defs>
<clippath id="highcharts-jshwdmt-1">
<rect fill="none" height="115" width="631" x="0" y="0"></rect>
</clippath>
</defs>
<rect class="highcharts-background" fill="#ffffff" height="150" rx="0" ry="0" width="694" x="0" y="0"></rect>
<rect class="highcharts-plot-background" fill="none" height="115" width="631" x="53" y="10"></rect>
<g class="highcharts-grid highcharts-xaxis-grid">
<path class="highcharts-grid-line" d="M 61.5 10 L 61.5 125" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 95.5 10 L 95.5 125" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 129.5 10 L 129.5 125" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 163.5 10 L 163.5 125" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 197.5 10 L 197.5 125" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 231.5 10 L 231.5 125" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 265.5 10 L 265.5 125" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 299.5 10 L 299.5 125" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 333.5 10 L 333.5 125" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 368.5 10 L 368.5 125" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 402.5 10 L 402.5 125" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 436.5 10 L 436.5 125" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 470.5 10 L 470.5 125" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 504.5 10 L 504.5 125" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 538.5 10 L 538.5 125" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 572.5 10 L 572.5 125" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 606.5 10 L 606.5 125" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 640.5 10 L 640.5 125" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 674.5 10 L 674.5 125" fill="none" opacity="1"></path>
</g>
<g class="highcharts-grid highcharts-yaxis-grid">
<path class="highcharts-grid-line" d="M 53 125.5 L 684 125.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 53 68.5 L 684 68.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 53 10.5 L 684 10.5" fill="none" opacity="1"></path>
</g>
<rect class="highcharts-plot-border" fill="none" height="115" width="631" x="53" y="10"></rect>
<g class="highcharts-axis highcharts-xaxis">
<path class="highcharts-tick" d="M 61.5 125 L 61.5 135" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 95.5 125 L 95.5 135" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 129.5 125 L 129.5 135" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 163.5 125 L 163.5 135" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 197.5 125 L 197.5 135" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 231.5 125 L 231.5 135" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 265.5 125 L 265.5 135" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 299.5 125 L 299.5 135" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 333.5 125 L 333.5 135" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 368.5 125 L 368.5 135" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 402.5 125 L 402.5 135" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 436.5 125 L 436.5 135" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 470.5 125 L 470.5 135" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 504.5 125 L 504.5 135" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 538.5 125 L 538.5 135" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 572.5 125 L 572.5 135" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 606.5 125 L 606.5 135" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 640.5 125 L 640.5 135" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 674.5 125 L 674.5 135" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-axis-line" d="M 53 125.5 L 684 125.5" fill="none" stroke="#ccd6eb" stroke-width="1"></path>
</g>
<g class="highcharts-axis highcharts-yaxis">
<path class="highcharts-axis-line" d="M 53 10 L 53 125" fill="none"></path>
</g>
<g class="highcharts-series-group">
<g class="highcharts-series highcharts-series-0 highcharts-column-series highcharts-color-undefined highcharts-tracker" clip-path="url(#highcharts-jshwdmt-1)" transform="translate(53,10) scale(1 1)">
<rect class="highcharts-point highcharts-color-0" fill="crimson" height="0" stroke="#bbb" stroke-width="1" width="9" x="3.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-1" fill="crimson" height="0" stroke="#bbb" stroke-width="1" width="9" x="20.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-2" fill="crimson" height="114" stroke="#bbb" stroke-width="1" width="9" x="38.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-3" fill="crimson" height="0" stroke="#bbb" stroke-width="1" width="9" x="55.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-4" fill="crimson" height="0" stroke="#bbb" stroke-width="1" width="9" x="72.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-5" fill="crimson" height="0" stroke="#bbb" stroke-width="1" width="9" x="89.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-6" fill="crimson" height="0" stroke="#bbb" stroke-width="1" width="9" x="106.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-7" fill="crimson" height="114" stroke="#bbb" stroke-width="1" width="9" x="123.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-8" fill="crimson" height="0" stroke="#bbb" stroke-width="1" width="9" x="140.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-9" fill="crimson" height="0" stroke="#bbb" stroke-width="1" width="9" x="157.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-10" fill="crimson" height="0" stroke="#bbb" stroke-width="1" width="9" x="174.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-11" fill="crimson" height="0" stroke="#bbb" stroke-width="1" width="9" x="191.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-12" fill="crimson" height="0" stroke="#bbb" stroke-width="1" width="9" x="208.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-13" fill="crimson" height="0" stroke="#bbb" stroke-width="1" width="9" x="225.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-14" fill="crimson" height="0" stroke="#bbb" stroke-width="1" width="9" x="242.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-15" fill="crimson" height="114" stroke="#bbb" stroke-width="1" width="9" x="259.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-16" fill="crimson" height="0" stroke="#bbb" stroke-width="1" width="9" x="276.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-17" fill="crimson" height="0" stroke="#bbb" stroke-width="1" width="9" x="293.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-18" fill="crimson" height="114" stroke="#bbb" stroke-width="1" width="9" x="310.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-19" fill="crimson" height="114" stroke="#bbb" stroke-width="1" width="9" x="327.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-20" fill="crimson" height="114" stroke="#bbb" stroke-width="1" width="9" x="345.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-21" fill="crimson" height="114" stroke="#bbb" stroke-width="1" width="9" x="362.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-22" fill="crimson" height="114" stroke="#bbb" stroke-width="1" width="9" x="379.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-23" fill="crimson" height="114" stroke="#bbb" stroke-width="1" width="9" x="396.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-24" fill="crimson" height="114" stroke="#bbb" stroke-width="1" width="9" x="413.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-25" fill="crimson" height="114" stroke="#bbb" stroke-width="1" width="9" x="430.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-26" fill="crimson" height="114" stroke="#bbb" stroke-width="1" width="9" x="447.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-27" fill="crimson" height="114" stroke="#bbb" stroke-width="1" width="9" x="464.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-28" fill="crimson" height="114" stroke="#bbb" stroke-width="1" width="9" x="481.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-29" fill="crimson" height="114" stroke="#bbb" stroke-width="1" width="9" x="498.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-30" fill="crimson" height="114" stroke="#bbb" stroke-width="1" width="9" x="515.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-31" fill="crimson" height="114" stroke="#bbb" stroke-width="1" width="9" x="532.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-32" fill="#f3f3f4" height="114" stroke="#bbb" stroke-width="1" width="9" x="549.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-33" fill="#f3f3f4" height="114" stroke="#bbb" stroke-width="1" width="9" x="566.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-34" fill="#f3f3f4" height="114" stroke="#bbb" stroke-width="1" width="9" x="583.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-35" fill="#f3f3f4" height="114" stroke="#bbb" stroke-width="1" width="9" x="600.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-36" fill="#f3f3f4" height="114" stroke="#bbb" stroke-width="1" width="9" x="617.5" y="1.5"></rect>
</g>
<g class="highcharts-markers highcharts-series-0 highcharts-column-series highcharts-color-undefined" clip-path="none" transform="translate(53,10) scale(1 1)"></g>
<g class="highcharts-series highcharts-series-1 highcharts-column-series highcharts-color-undefined highcharts-tracker" clip-path="url(#highcharts-jshwdmt-1)" transform="translate(53,10) scale(1 1)">
<rect class="highcharts-point highcharts-color-0" fill="green" height="114" stroke="#bbb" stroke-width="1" width="9" x="3.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-1" fill="green" height="114" stroke="#bbb" stroke-width="1" width="9" x="20.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-2" fill="green" height="0" stroke="#bbb" stroke-width="1" width="9" x="38.5" y="115.5"></rect>
<rect class="highcharts-point highcharts-color-3" fill="green" height="114" stroke="#bbb" stroke-width="1" width="9" x="55.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-4" fill="green" height="114" stroke="#bbb" stroke-width="1" width="9" x="72.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-5" fill="green" height="114" stroke="#bbb" stroke-width="1" width="9" x="89.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-6" fill="green" height="114" stroke="#bbb" stroke-width="1" width="9" x="106.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-7" fill="green" height="0" stroke="#bbb" stroke-width="1" width="9" x="123.5" y="115.5"></rect>
<rect class="highcharts-point highcharts-color-8" fill="green" height="114" stroke="#bbb" stroke-width="1" width="9" x="140.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-9" fill="green" height="114" stroke="#bbb" stroke-width="1" width="9" x="157.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-10" fill="green" height="114" stroke="#bbb" stroke-width="1" width="9" x="174.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-11" fill="green" height="114" stroke="#bbb" stroke-width="1" width="9" x="191.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-12" fill="green" height="114" stroke="#bbb" stroke-width="1" width="9" x="208.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-13" fill="green" height="114" stroke="#bbb" stroke-width="1" width="9" x="225.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-14" fill="green" height="114" stroke="#bbb" stroke-width="1" width="9" x="242.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-15" fill="green" height="0" stroke="#bbb" stroke-width="1" width="9" x="259.5" y="115.5"></rect>
<rect class="highcharts-point highcharts-color-16" fill="green" height="114" stroke="#bbb" stroke-width="1" width="9" x="276.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-17" fill="green" height="114" stroke="#bbb" stroke-width="1" width="9" x="293.5" y="1.5"></rect>
<rect class="highcharts-point highcharts-color-18" fill="green" height="0" stroke="#bbb" stroke-width="1" width="9" x="310.5" y="115.5"></rect>
<rect class="highcharts-point highcharts-color-19" fill="green" height="0" stroke="#bbb" stroke-width="1" width="9" x="327.5" y="115.5"></rect>
<rect class="highcharts-point highcharts-color-20" fill="green" height="0" stroke="#bbb" stroke-width="1" width="9" x="345.5" y="115.5"></rect>
<rect class="highcharts-point highcharts-color-21" fill="green" height="0" stroke="#bbb" stroke-width="1" width="9" x="362.5" y="115.5"></rect>
<rect class="highcharts-point highcharts-color-22" fill="green" height="0" stroke="#bbb" stroke-width="1" width="9" x="379.5" y="115.5"></rect>
<rect class="highcharts-point highcharts-color-23" fill="green" height="0" stroke="#bbb" stroke-width="1" width="9" x="396.5" y="115.5"></rect>
<rect class="highcharts-point highcharts-color-24" fill="green" height="0" stroke="#bbb" stroke-width="1" width="9" x="413.5" y="115.5"></rect>
<rect class="highcharts-point highcharts-color-25" fill="green" height="0" stroke="#bbb" stroke-width="1" width="9" x="430.5" y="115.5"></rect>
<rect class="highcharts-point highcharts-color-26" fill="green" height="0" stroke="#bbb" stroke-width="1" width="9" x="447.5" y="115.5"></rect>
<rect class="highcharts-point highcharts-color-27" fill="green" height="0" stroke="#bbb" stroke-width="1" width="9" x="464.5" y="115.5"></rect>
<rect class="highcharts-point highcharts-color-28" fill="green" height="0" stroke="#bbb" stroke-width="1" width="9" x="481.5" y="115.5"></rect>
<rect class="highcharts-point highcharts-color-29" fill="green" height="0" stroke="#bbb" stroke-width="1" width="9" x="498.5" y="115.5"></rect>
<rect class="highcharts-point highcharts-color-30" fill="green" height="0" stroke="#bbb" stroke-width="1" width="9" x="515.5" y="115.5"></rect>
<rect class="highcharts-point highcharts-color-31" fill="green" height="0" stroke="#bbb" stroke-width="1" width="9" x="532.5" y="115.5"></rect>
<rect class="highcharts-point highcharts-color-32" fill="green" height="0" stroke="#bbb" stroke-width="1" width="9" x="549.5" y="115.5"></rect>
<rect class="highcharts-point highcharts-color-33" fill="green" height="0" stroke="#bbb" stroke-width="1" width="9" x="566.5" y="115.5"></rect>
<rect class="highcharts-point highcharts-color-34" fill="green" height="0" stroke="#bbb" stroke-width="1" width="9" x="583.5" y="115.5"></rect>
<rect class="highcharts-point highcharts-color-35" fill="green" height="0" stroke="#bbb" stroke-width="1" width="9" x="600.5" y="115.5"></rect>
<rect class="highcharts-point highcharts-color-36" fill="green" height="0" stroke="#bbb" stroke-width="1" width="9" x="617.5" y="115.5"></rect>
</g>
<g class="highcharts-markers highcharts-series-1 highcharts-column-series highcharts-color-undefined" clip-path="none" transform="translate(53,10) scale(1 1)"></g>
</g>
<g class="highcharts-axis-labels highcharts-xaxis-labels"></g>
<g class="highcharts-axis-labels highcharts-yaxis-labels">
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" x="38" y="129">
<tspan>
0%
</tspan>
</text>
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" x="38" y="71">
<tspan>
50%
</tspan>
</text>
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" x="38" y="14">
<tspan>
100%
</tspan>
</text>
</g>
<g class="highcharts-label highcharts-tooltip highcharts-color-26" opacity="0" style="cursor:default;pointer-events:none;white-space:nowrap;" transform="translate(832,-9999)" visibility="visible">
<path class="highcharts-label-box highcharts-tooltip-box" d="M 3.5 0.5 L 44.5 0.5 50.5 -5.5 56.5 0.5 99 0.5 C 102.5 0.5 102.5 0.5 102.5 3.5 L 102.5 45.5 C 102.5 48.5 102.5 48.5 99.5 48.5 L 3.5 48.5 C 0.5 48.5 0.5 48.5 0.5 45.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" fill="none" isshadow="true" stroke="#000000" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path>
<path class="highcharts-label-box highcharts-tooltip-box" d="M 3.5 0.5 L 44.5 0.5 50.5 -5.5 56.5 0.5 99 0.5 C 102.5 0.5 102.5 0.5 102.5 3.5 L 102.5 45.5 C 102.5 48.5 102.5 48.5 99.5 48.5 L 3.5 48.5 C 0.5 48.5 0.5 48.5 0.5 45.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" fill="none" isshadow="true" stroke="#000000" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path>
<path class="highcharts-label-box highcharts-tooltip-box" d="M 3.5 0.5 L 44.5 0.5 50.5 -5.5 56.5 0.5 99 0.5 C 102.5 0.5 102.5 0.5 102.5 3.5 L 102.5 45.5 C 102.5 48.5 102.5 48.5 99.5 48.5 L 3.5 48.5 C 0.5 48.5 0.5 48.5 0.5 45.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" fill="none" isshadow="true" stroke="#000000" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path>
<path class="highcharts-label-box highcharts-tooltip-box" d="M 3.5 0.5 L 44.5 0.5 50.5 -5.5 56.5 0.5 99 0.5 C 102.5 0.5 102.5 0.5 102.5 3.5 L 102.5 45.5 C 102.5 48.5 102.5 48.5 99.5 48.5 L 3.5 48.5 C 0.5 48.5 0.5 48.5 0.5 45.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" fill="rgba(247,247,247,0.85)" stroke="crimson" stroke-width="1"></path>
<text style="font-size:12px;color:#333333;fill:#333333;" x="8" y="20">
<tspan style="font-weight:bold">
26/04/2017
</tspan>
<tspan dy="15" style="fill:crimson" x="8">
0%
</tspan>
</text>
</g></svg>
</div>
</div>
<div class="start-end-date">
<div class="col-sm-12">
<div class="row">
<span class="startdate pull-left">Course start date: 20/01/2017</span> <span class="enddate pull-right">Finish: 31/05/2017</span>
</div>
<div class="row label-key">
Key: <span class="label-present">Present</span> <span class="label-absent">Absent</span>
</div>
</div>
</div>
</div>
<div id="atten-render-mobile" style="display: none;">
<div class="start-end-date">
<div class="col-sm-12">
<div class="row">
<div class="label-key">
Key: <span class="label-present">Present</span> <span class="label-absent">Absent</span>
</div>
<div class="date-key">
<span class="startdate pull-left">Course start date: 20/01/2017</span> <span class="enddate pull-right">Finish: 31/05/2017</span>
</div>
</div>
</div>
</div>
<div id="attenChartMobile"></div>
</div>
</div><!-- / Attendance Chart -->
</div><!-- Mid Module Chart -->
<div class="tab-pane fade in" id="mid-tab" role="tabpanel">
<div class="box-chart text-center" id="box-mid-module-chart">
<h3 class="text-center"><strong>Mid Module Test</strong> <span class="percent">0/100</span></h3>
<div class="chart-container" data-highcharts-chart="5" id="midChart">
<div class="highcharts-container" id="highcharts-jshwdmt-20" style="position: relative; overflow: hidden; width: 1074px; height: 400px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<svg class="highcharts-root" height="400" style="font-family:" version="1.1" viewbox="0 0 1074 400" width="1074" xmlns="http://www.w3.org/2000/svg">
<desc>
Created with Highcharts 5.0.11
</desc>
<defs>
<clippath id="highcharts-jshwdmt-21">
<rect fill="none" height="335" width="1054" x="0" y="0"></rect>
</clippath>
</defs>
<rect class="highcharts-background" fill="#ffffff" height="400" rx="0" ry="0" width="1074" x="0" y="0"></rect>
<rect class="highcharts-plot-background" fill="none" height="335" width="1054" x="10" y="10"></rect>
<g class="highcharts-grid highcharts-xaxis-grid">
<path class="highcharts-grid-line" d="M 220.5 10 L 220.5 345" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 431.5 10 L 431.5 345" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 641.5 10 L 641.5 345" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 852.5 10 L 852.5 345" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 1063.5 10 L 1063.5 345" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 9.5 10 L 9.5 345" fill="none" opacity="1"></path>
</g>
<g class="highcharts-grid highcharts-yaxis-grid">
<path class="highcharts-grid-line" d="M 10 345.5 L 1064 345.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 289.5 L 1064 289.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 233.5 L 1064 233.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 178.5 L 1064 178.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 122.5 L 1064 122.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 66.5 L 1064 66.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 10.5 L 1064 10.5" fill="none" opacity="1"></path>
</g>
<rect class="highcharts-plot-border" fill="none" height="335" width="1054" x="10" y="10"></rect>
<g class="highcharts-axis highcharts-xaxis">
<path class="highcharts-tick" d="M 220.5 345 L 220.5 355" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 431.5 345 L 431.5 355" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 641.5 345 L 641.5 355" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 852.5 345 L 852.5 355" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 1064.5 345 L 1064.5 355" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 9.5 345 L 9.5 355" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-axis-line" d="M 10 345.5 L 1064 345.5" fill="none" stroke="#ccd6eb" stroke-width="1"></path>
</g>
<g class="highcharts-axis highcharts-yaxis">
<path class="highcharts-axis-line" d="M 10 10 L 10 345" fill="none"></path>
</g>
<g class="highcharts-series-group">
<g class="highcharts-series highcharts-series-0 highcharts-column-series highcharts-color-undefined remain-score-color highcharts-tracker" clip-path="url(#highcharts-jshwdmt-21)" transform="translate(10,10) scale(1 1)">
<rect class="highcharts-point highcharts-color-0" fill="#f3f3f4" height="112" stroke="#bbb" stroke-width="1" width="102" x="54.5" y="223.5"></rect>
<rect class="highcharts-point highcharts-color-1" fill="#f3f3f4" height="112" stroke="#bbb" stroke-width="1" width="102" x="265.5" y="223.5"></rect>
<rect class="highcharts-point highcharts-color-2" fill="#f3f3f4" height="28" stroke="#bbb" stroke-width="1" width="102" x="475.5" y="307.5"></rect>
<rect class="highcharts-point highcharts-color-3" fill="#f3f3f4" height="28" stroke="#bbb" stroke-width="1" width="102" x="686.5" y="307.5"></rect>
<rect class="highcharts-point highcharts-color-4" fill="#f3f3f4" height="279" stroke="#bbb" stroke-width="1" width="102" x="897.5" y="56.5"></rect>
</g>
<g class="highcharts-markers highcharts-series-0 highcharts-column-series highcharts-color-undefined remain-score-color" clip-path="none" transform="translate(10,10) scale(1 1)"></g>
<g class="highcharts-series highcharts-series-1 highcharts-column-series highcharts-color-undefined your-score-color highcharts-tracker" clip-path="url(#highcharts-jshwdmt-21)" transform="translate(10,10) scale(1 1)">
<rect class="highcharts-point highcharts-color-0" fill="rgba(255, 169, 24, 1.0)" height="0" stroke="#bbb" stroke-width="1" width="102" x="54.5" y="335.5"></rect>
<rect class="highcharts-point highcharts-color-1" fill="rgba(75, 189, 65, 1.0)" height="0" stroke="#bbb" stroke-width="1" width="102" x="265.5" y="335.5"></rect>
<rect class="highcharts-point highcharts-color-2" fill="rgba(228, 57, 57, 1.0)" height="0" stroke="#bbb" stroke-width="1" width="102" x="475.5" y="335.5"></rect>
<rect class="highcharts-point highcharts-color-3" fill="rgba(204, 179, 51, 1.0)" height="0" stroke="#bbb" stroke-width="1" width="102" x="686.5" y="335.5"></rect>
<rect class="highcharts-point highcharts-color-4" fill="rgba(51, 204, 179, 1.0)" height="0" stroke="#bbb" stroke-width="1" width="102" x="897.5" y="335.5"></rect>
</g>
<g class="highcharts-markers highcharts-series-1 highcharts-column-series highcharts-color-undefined your-score-color" clip-path="none" transform="translate(10,10) scale(1 1)"></g>
</g>
<g class="highcharts-stack-labels" transform="translate(10,10)" visibility="visible">
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="105" y="217">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="105" y="217">
20
</tspan>
<tspan x="105" y="217">
20
</tspan>
</text>
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="316" y="217">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="316" y="217">
20
</tspan>
<tspan x="316" y="217">
20
</tspan>
</text>
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="527" y="301">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="527" y="301">
5
</tspan>
<tspan x="527" y="301">
5
</tspan>
</text>
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="738" y="301">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="738" y="301">
5
</tspan>
<tspan x="738" y="301">
5
</tspan>
</text>
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="949" y="50">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="949" y="50">
50
</tspan>
<tspan x="949" y="50">
50
</tspan>
</text>
</g>
<g class="highcharts-data-labels highcharts-series-0 highcharts-column-series highcharts-color-undefined remain-score-color highcharts-tracker" opacity="1" transform="translate(10,10) scale(1 1)"></g>
<g class="highcharts-data-labels highcharts-series-1 highcharts-column-series highcharts-color-undefined your-score-color highcharts-tracker" opacity="1" transform="translate(10,10) scale(1 1)"></g>
<g class="highcharts-axis-labels highcharts-xaxis-labels">
<text opacity="1" style="color:#444;cursor:default;font-size:13px;fill:#444;" text-anchor="middle" transform="translate(0,0)" x="115.4" y="366">
<tspan>
Listening
</tspan>
<tspan dy="16" x="115.4">
22/03/2017
</tspan>
</text>
<text opacity="1" style="color:#444;cursor:default;font-size:13px;fill:#444;" text-anchor="middle" transform="translate(0,0)" x="326.20000000000005" y="366">
<tspan>
Grammar and Vocabulary
</tspan>
<tspan dy="16" x="326.20000000000005">
24/03/2017
</tspan>
</text>
<text opacity="1" style="color:#444;cursor:default;font-size:13px;fill:#444;" text-anchor="middle" transform="translate(0,0)" x="537" y="366">
<tspan>
Writing
</tspan>
<tspan dy="16" x="537">
24/03/2017
</tspan>
</text>
<text opacity="1" style="color:#444;cursor:default;font-size:13px;fill:#444;" text-anchor="middle" transform="translate(0,0)" x="747.8000000000001" y="366">
<tspan>
Reading
</tspan>
<tspan dy="16" x="747.8000000000001">
24/03/2017
</tspan>
</text>
<text opacity="1" style="color:#444;cursor:default;font-size:13px;fill:#444;" text-anchor="middle" transform="translate(0,0)" x="958.6" y="366">
<tspan>
Speaking
</tspan>
<tspan dy="16" x="958.6">
24/03/2017
</tspan>
</text>
</g>
<g class="highcharts-axis-labels highcharts-yaxis-labels"></g></svg>
</div>
</div>
</div>
</div><!-- / Mid Module Chart -->
<!-- End Module Chart -->
<div class="tab-pane fade in" id="end-tab" role="tabpanel">
<div class="box-chart text-center" id="box-end-module-chart">
<h3 class="text-center"><strong>End of Module Test</strong> <span class="percent">0/100</span></h3>
<div class="chart-container" id="endChart"></div>
</div>
</div><!-- / End Module Chart -->
<!-- Cambridge Chart -->
<div class="tab-pane fade in" id="cambridge-tab" role="tabpanel">
<div class="box-chart text-center" id="box-cambridge-chart">
<h3 class="text-center"><strong>Cambridge Mock Test</strong> <span class="percent">0/105</span></h3>
<div class="chart-container" id="cambChart"></div>
</div>
</div><!-- / Cambridge Chart -->
<!-- Projects Chart -->
<div class="tab-pane fade in" id="project01-tab" role="tabpanel">
<div class="box-chart text-center" id="box-projectChart01">
<h3 class="text-center"><strong>Project 01 Assessment</strong> <span class="percent">0/100</span></h3>
<div class="chart-container" data-highcharts-chart="1" id="projectChart01">
<div class="highcharts-container" id="highcharts-jshwdmt-4" style="position: relative; overflow: hidden; width: 1074px; height: 400px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<svg class="highcharts-root" height="400" style="font-family:" version="1.1" viewbox="0 0 1074 400" width="1074" xmlns="http://www.w3.org/2000/svg">
<desc>
Created with Highcharts 5.0.11
</desc>
<defs>
<clippath id="highcharts-jshwdmt-5">
<rect fill="none" height="352" width="1054" x="0" y="0"></rect>
</clippath>
</defs>
<rect class="highcharts-background" fill="#ffffff" height="400" rx="0" ry="0" width="1074" x="0" y="0"></rect>
<rect class="highcharts-plot-background" fill="none" height="352" width="1054" x="10" y="10"></rect>
<g class="highcharts-grid highcharts-xaxis-grid">
<path class="highcharts-grid-line" d="M 160.5 10 L 160.5 362" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 310.5 10 L 310.5 362" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 461.5 10 L 461.5 362" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 611.5 10 L 611.5 362" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 762.5 10 L 762.5 362" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 912.5 10 L 912.5 362" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 1063.5 10 L 1063.5 362" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 9.5 10 L 9.5 362" fill="none" opacity="1"></path>
</g>
<g class="highcharts-grid highcharts-yaxis-grid">
<path class="highcharts-grid-line" d="M 10 362.5 L 1064 362.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 303.5 L 1064 303.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 245.5 L 1064 245.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 186.5 L 1064 186.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 127.5 L 1064 127.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 69.5 L 1064 69.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 10.5 L 1064 10.5" fill="none" opacity="1"></path>
</g>
<rect class="highcharts-plot-border" fill="none" height="352" width="1054" x="10" y="10"></rect>
<g class="highcharts-axis highcharts-xaxis">
<path class="highcharts-tick" d="M 160.5 362 L 160.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 310.5 362 L 310.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 461.5 362 L 461.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 611.5 362 L 611.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 762.5 362 L 762.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 912.5 362 L 912.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 1064.5 362 L 1064.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 9.5 362 L 9.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-axis-line" d="M 10 362.5 L 1064 362.5" fill="none" stroke="#ccd6eb" stroke-width="1"></path>
</g>
<g class="highcharts-axis highcharts-yaxis">
<path class="highcharts-axis-line" d="M 10 10 L 10 362" fill="none"></path>
</g>
<g class="highcharts-series-group">
<g class="highcharts-series highcharts-series-0 highcharts-column-series highcharts-color-undefined remain-score-color highcharts-tracker" clip-path="url(#highcharts-jshwdmt-5)" transform="translate(10,10) scale(1 1)">
<rect class="highcharts-point highcharts-color-0" fill="#f3f3f4" height="293" stroke="#bbb" stroke-width="1" width="50" x="49.5" y="59.5"></rect>
<rect class="highcharts-point highcharts-color-1" fill="#f3f3f4" height="59" stroke="#bbb" stroke-width="1" width="50" x="200.5" y="293.5"></rect>
<rect class="highcharts-point highcharts-color-2" fill="#f3f3f4" height="47" stroke="#bbb" stroke-width="1" width="50" x="350.5" y="305.5"></rect>
<rect class="highcharts-point highcharts-color-3" fill="#f3f3f4" height="47" stroke="#bbb" stroke-width="1" width="50" x="501.5" y="305.5"></rect>
<rect class="highcharts-point highcharts-color-4" fill="#f3f3f4" height="47" stroke="#bbb" stroke-width="1" width="50" x="652.5" y="305.5"></rect>
<rect class="highcharts-point highcharts-color-5" fill="#f3f3f4" height="47" stroke="#bbb" stroke-width="1" width="50" x="802.5" y="305.5"></rect>
<rect class="highcharts-point highcharts-color-6" fill="#f3f3f4" height="47" stroke="#bbb" stroke-width="1" width="50" x="953.5" y="305.5"></rect>
</g>
<g class="highcharts-markers highcharts-series-0 highcharts-column-series highcharts-color-undefined remain-score-color" clip-path="none" transform="translate(10,10) scale(1 1)"></g>
<g class="highcharts-series highcharts-series-1 highcharts-column-series highcharts-color-undefined your-score-color highcharts-tracker" clip-path="url(#highcharts-jshwdmt-5)" transform="translate(10,10) scale(1 1)">
<rect class="highcharts-point highcharts-color-0" fill="rgba(255, 169, 24, 1.0)" height="0" stroke="#bbb" stroke-width="1" width="50" x="49.5" y="352.5"></rect>
<rect class="highcharts-point highcharts-color-1" fill="rgba(75, 189, 65, 1.0)" height="0" stroke="#bbb" stroke-width="1" width="50" x="200.5" y="352.5"></rect>
<rect class="highcharts-point highcharts-color-2" fill="rgba(228, 57, 57, 1.0)" height="0" stroke="#bbb" stroke-width="1" width="50" x="350.5" y="352.5"></rect>
<rect class="highcharts-point highcharts-color-3" fill="rgba(204, 179, 51, 1.0)" height="0" stroke="#bbb" stroke-width="1" width="50" x="501.5" y="352.5"></rect>
<rect class="highcharts-point highcharts-color-4" fill="rgba(51, 204, 179, 1.0)" height="0" stroke="#bbb" stroke-width="1" width="50" x="652.5" y="352.5"></rect>
<rect class="highcharts-point highcharts-color-5" fill="rgba(204, 51, 153, 1.0)" height="0" stroke="#bbb" stroke-width="1" width="50" x="802.5" y="352.5"></rect>
<rect class="highcharts-point highcharts-color-6" fill="rgba(80, 152, 216, 1.0)" height="0" stroke="#bbb" stroke-width="1" width="50" x="953.5" y="352.5"></rect>
</g>
<g class="highcharts-markers highcharts-series-1 highcharts-column-series highcharts-color-undefined your-score-color" clip-path="none" transform="translate(10,10) scale(1 1)"></g>
</g>
<g class="highcharts-stack-labels" transform="translate(10,10)" visibility="visible">
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="75" y="53">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="75" y="53">
50
</tspan>
<tspan x="75" y="53">
50
</tspan>
</text>
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="226" y="287">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="226" y="287">
10
</tspan>
<tspan x="226" y="287">
10
</tspan>
</text>
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="376" y="299">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="376" y="299">
8
</tspan>
<tspan x="376" y="299">
8
</tspan>
</text>
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="527" y="299">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="527" y="299">
8
</tspan>
<tspan x="527" y="299">
8
</tspan>
</text>
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="678" y="299">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="678" y="299">
8
</tspan>
<tspan x="678" y="299">
8
</tspan>
</text>
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="828" y="299">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="828" y="299">
8
</tspan>
<tspan x="828" y="299">
8
</tspan>
</text>
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="979" y="299">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="979" y="299">
8
</tspan>
<tspan x="979" y="299">
8
</tspan>
</text>
</g>
<g class="highcharts-data-labels highcharts-series-0 highcharts-column-series highcharts-color-undefined remain-score-color highcharts-tracker" opacity="1" transform="translate(10,10) scale(1 1)"></g>
<g class="highcharts-data-labels highcharts-series-1 highcharts-column-series highcharts-color-undefined your-score-color highcharts-tracker" opacity="1" transform="translate(10,10) scale(1 1)"></g>
<g class="highcharts-axis-labels highcharts-xaxis-labels">
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" x="85.28571428571429" y="381">
<tspan>
Language
</tspan>
</text>
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" x="235.8571428571429" y="381">
<tspan>
Task Achievement
</tspan>
</text>
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" x="386.42857142857144" y="381">
<tspan>
Collaboration
</tspan>
</text>
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" x="537" y="381">
<tspan>
Critical Thinking
</tspan>
</text>
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" x="687.5714285714287" y="381">
<tspan>
Creativity
</tspan>
</text>
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" x="838.1428571428572" y="381">
<tspan>
Digital Literacy
</tspan>
</text>
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" x="988.7142857142857" y="381">
<tspan>
Self Development
</tspan>
</text>
</g>
<g class="highcharts-axis-labels highcharts-yaxis-labels"></g></svg>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="project02-tab" role="tabpanel">
<div class="box-chart text-center" id="box-projectChart02">
<h3 class="text-center"><strong>Project 02 Assessment</strong> <span class="percent">92/100</span></h3>
<div class="chart-container" data-highcharts-chart="2" id="projectChart02">
<div class="highcharts-container" id="highcharts-jshwdmt-8" style="position: relative; overflow: hidden; width: 1074px; height: 400px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<svg class="highcharts-root" height="400" style="font-family:" version="1.1" viewbox="0 0 1074 400" width="1074" xmlns="http://www.w3.org/2000/svg">
<desc>
Created with Highcharts 5.0.11
</desc>
<defs>
<clippath id="highcharts-jshwdmt-9">
<rect fill="none" height="352" width="1054" x="0" y="0"></rect>
</clippath>
</defs>
<rect class="highcharts-background" fill="#ffffff" height="400" rx="0" ry="0" width="1074" x="0" y="0"></rect>
<rect class="highcharts-plot-background" fill="none" height="352" width="1054" x="10" y="10"></rect>
<g class="highcharts-grid highcharts-xaxis-grid">
<path class="highcharts-grid-line" d="M 160.5 10 L 160.5 362" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 310.5 10 L 310.5 362" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 461.5 10 L 461.5 362" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 611.5 10 L 611.5 362" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 762.5 10 L 762.5 362" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 912.5 10 L 912.5 362" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 1063.5 10 L 1063.5 362" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 9.5 10 L 9.5 362" fill="none" opacity="1"></path>
</g>
<g class="highcharts-grid highcharts-yaxis-grid">
<path class="highcharts-grid-line" d="M 10 362.5 L 1064 362.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 303.5 L 1064 303.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 245.5 L 1064 245.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 186.5 L 1064 186.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 127.5 L 1064 127.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 69.5 L 1064 69.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 10.5 L 1064 10.5" fill="none" opacity="1"></path>
</g>
<rect class="highcharts-plot-border" fill="none" height="352" width="1054" x="10" y="10"></rect>
<g class="highcharts-axis highcharts-xaxis">
<path class="highcharts-tick" d="M 160.5 362 L 160.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 310.5 362 L 310.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 461.5 362 L 461.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 611.5 362 L 611.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 762.5 362 L 762.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 912.5 362 L 912.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 1064.5 362 L 1064.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 9.5 362 L 9.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-axis-line" d="M 10 362.5 L 1064 362.5" fill="none" stroke="#ccd6eb" stroke-width="1"></path>
</g>
<g class="highcharts-axis highcharts-yaxis">
<path class="highcharts-axis-line" d="M 10 10 L 10 362" fill="none"></path>
</g>
<g class="highcharts-series-group">
<g class="highcharts-series highcharts-series-0 highcharts-column-series highcharts-color-undefined remain-score-color highcharts-tracker" clip-path="url(#highcharts-jshwdmt-9)" transform="translate(10,10) scale(1 1)">
<rect class="highcharts-point highcharts-color-0" fill="#f3f3f4" height="0" stroke="#bbb" stroke-width="1" width="50" x="49.5" y="59.5"></rect>
<rect class="highcharts-point highcharts-color-1" fill="#f3f3f4" height="12" stroke="#bbb" stroke-width="1" width="50" x="200.5" y="293.5"></rect>
<rect class="highcharts-point highcharts-color-2" fill="#f3f3f4" height="24" stroke="#bbb" stroke-width="1" width="50" x="350.5" y="305.5"></rect>
<rect class="highcharts-point highcharts-color-3" fill="#f3f3f4" height="0" stroke="#bbb" stroke-width="1" width="50" x="501.5" y="305.5"></rect>
<rect class="highcharts-point highcharts-color-4" fill="#f3f3f4" height="0" stroke="#bbb" stroke-width="1" width="50" x="652.5" y="305.5"></rect>
<rect class="highcharts-point highcharts-color-5" fill="#f3f3f4" height="0" stroke="#bbb" stroke-width="1" width="50" x="802.5" y="305.5"></rect>
<rect class="highcharts-point highcharts-color-6" fill="#f3f3f4" height="12" stroke="#bbb" stroke-width="1" width="50" x="953.5" y="305.5"></rect>
</g>
<g class="highcharts-markers highcharts-series-0 highcharts-column-series highcharts-color-undefined remain-score-color" clip-path="none" transform="translate(10,10) scale(1 1)"></g>
<g class="highcharts-series highcharts-series-1 highcharts-column-series highcharts-color-undefined your-score-color highcharts-tracker" clip-path="url(#highcharts-jshwdmt-9)" transform="translate(10,10) scale(1 1)">
<rect class="highcharts-point highcharts-color-0" fill="rgba(255, 169, 24, 1.0)" height="293" stroke="#bbb" stroke-width="1" width="50" x="49.5" y="59.5"></rect>
<rect class="highcharts-point highcharts-color-1" fill="rgba(75, 189, 65, 1.0)" height="47" stroke="#bbb" stroke-width="1" width="50" x="200.5" y="305.5"></rect>
<rect class="highcharts-point highcharts-color-2" fill="rgba(228, 57, 57, 1.0)" height="23" stroke="#bbb" stroke-width="1" width="50" x="350.5" y="329.5"></rect>
<rect class="highcharts-point highcharts-color-3" fill="rgba(204, 179, 51, 1.0)" height="47" stroke="#bbb" stroke-width="1" width="50" x="501.5" y="305.5"></rect>
<rect class="highcharts-point highcharts-color-4" fill="rgba(51, 204, 179, 1.0)" height="47" stroke="#bbb" stroke-width="1" width="50" x="652.5" y="305.5"></rect>
<rect class="highcharts-point highcharts-color-5" fill="rgba(204, 51, 153, 1.0)" height="47" stroke="#bbb" stroke-width="1" width="50" x="802.5" y="305.5"></rect>
<rect class="highcharts-point highcharts-color-6" fill="rgba(80, 152, 216, 1.0)" height="35" stroke="#bbb" stroke-width="1" width="50" x="953.5" y="317.5"></rect>
</g>
<g class="highcharts-markers highcharts-series-1 highcharts-column-series highcharts-color-undefined your-score-color" clip-path="none" transform="translate(10,10) scale(1 1)"></g>
</g>
<g class="highcharts-stack-labels" transform="translate(10,10)" visibility="visible">
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="75" y="53">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="75" y="53">
50
</tspan>
<tspan x="75" y="53">
50
</tspan>
</text>
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="226" y="287">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="226" y="287">
10
</tspan>
<tspan x="226" y="287">
10
</tspan>
</text>
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="376" y="299">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="376" y="299">
8
</tspan>
<tspan x="376" y="299">
8
</tspan>
</text>
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="527" y="299">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="527" y="299">
8
</tspan>
<tspan x="527" y="299">
8
</tspan>
</text>
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="678" y="299">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="678" y="299">
8
</tspan>
<tspan x="678" y="299">
8
</tspan>
</text>
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="828" y="299">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="828" y="299">
8
</tspan>
<tspan x="828" y="299">
8
</tspan>
</text>
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="979" y="299">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="979" y="299">
8
</tspan>
<tspan x="979" y="299">
8
</tspan>
</text>
</g>
<g class="highcharts-data-labels highcharts-series-0 highcharts-column-series highcharts-color-undefined remain-score-color highcharts-tracker" opacity="1" transform="translate(10,10) scale(1 1)"></g>
<g class="highcharts-data-labels highcharts-series-1 highcharts-column-series highcharts-color-undefined your-score-color highcharts-tracker" opacity="1" transform="translate(10,10) scale(1 1)">
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-0" transform="translate(61,193)">
<text style="font-size:11px;font-weight:bold;color:white;fill:white;" x="5" y="16">
<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-linejoin="round" stroke-width="2px" x="5" y="16">
50
</tspan>
<tspan x="5" y="16">
50
</tspan>
</text>
</g>
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-1" transform="translate(216,316)">
<text style="font-size:11px;font-weight:bold;color:white;fill:white;" x="5" y="16">
<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-linejoin="round" stroke-width="2px" x="5" y="16">
8
</tspan>
<tspan x="5" y="16">
8
</tspan>
</text>
</g>
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-2" transform="translate(366,328)">
<text style="font-size:11px;font-weight:bold;color:white;fill:white;" x="5" y="16">
<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-linejoin="round" stroke-width="2px" x="5" y="16">
4
</tspan>
<tspan x="5" y="16">
4
</tspan>
</text>
</g>
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-3" transform="translate(517,316)">
<text style="font-size:11px;font-weight:bold;color:white;fill:white;" x="5" y="16">
<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-linejoin="round" stroke-width="2px" x="5" y="16">
8
</tspan>
<tspan x="5" y="16">
8
</tspan>
</text>
</g>
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-4" transform="translate(668,316)">
<text style="font-size:11px;font-weight:bold;color:white;fill:white;" x="5" y="16">
<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-linejoin="round" stroke-width="2px" x="5" y="16">
8
</tspan>
<tspan x="5" y="16">
8
</tspan>
</text>
</g>
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-5" transform="translate(818,316)">
<text style="font-size:11px;font-weight:bold;color:white;fill:white;" x="5" y="16">
<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-linejoin="round" stroke-width="2px" x="5" y="16">
8
</tspan>
<tspan x="5" y="16">
8
</tspan>
</text>
</g>
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-6" transform="translate(969,322)">
<text style="font-size:11px;font-weight:bold;color:white;fill:white;" x="5" y="16">
<tspan class="highcharts-text-outline" fill="#000000" stroke="#000000" stroke-linejoin="round" stroke-width="2px" x="5" y="16">
6
</tspan>
<tspan x="5" y="16">
6
</tspan>
</text>
</g>
</g>
<g class="highcharts-axis-labels highcharts-xaxis-labels">
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" x="85.28571428571429" y="381">
<tspan>
Language
</tspan>
</text>
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" x="235.8571428571429" y="381">
<tspan>
Task Achievement
</tspan>
</text>
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" x="386.42857142857144" y="381">
<tspan>
Collaboration
</tspan>
</text>
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" x="537" y="381">
<tspan>
Critical Thinking
</tspan>
</text>
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" x="687.5714285714287" y="381">
<tspan>
Creativity
</tspan>
</text>
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" x="838.1428571428572" y="381">
<tspan>
Digital Literacy
</tspan>
</text>
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" x="988.7142857142857" y="381">
<tspan>
Self Development
</tspan>
</text>
</g>
<g class="highcharts-axis-labels highcharts-yaxis-labels"></g></svg>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="project03-tab" role="tabpanel">
<div class="box-chart text-center" id="box-projectChart03">
<h3 class="text-center"><strong>Project 03 Assessment</strong> <span class="percent">0/100</span></h3>
<div class="chart-container" data-highcharts-chart="4" id="projectChart03">
<div class="highcharts-container" id="highcharts-jshwdmt-16" style="position: relative; overflow: hidden; width: 1074px; height: 400px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<svg class="highcharts-root" height="400" style="font-family:" version="1.1" viewbox="0 0 1074 400" width="1074" xmlns="http://www.w3.org/2000/svg">
<desc>
Created with Highcharts 5.0.11
</desc>
<defs>
<clippath id="highcharts-jshwdmt-17">
<rect fill="none" height="352" width="1054" x="0" y="0"></rect>
</clippath>
</defs>
<rect class="highcharts-background" fill="#ffffff" height="400" rx="0" ry="0" width="1074" x="0" y="0"></rect>
<rect class="highcharts-plot-background" fill="none" height="352" width="1054" x="10" y="10"></rect>
<g class="highcharts-grid highcharts-xaxis-grid">
<path class="highcharts-grid-line" d="M 160.5 10 L 160.5 362" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 310.5 10 L 310.5 362" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 461.5 10 L 461.5 362" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 611.5 10 L 611.5 362" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 762.5 10 L 762.5 362" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 912.5 10 L 912.5 362" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 1063.5 10 L 1063.5 362" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 9.5 10 L 9.5 362" fill="none" opacity="1"></path>
</g>
<g class="highcharts-grid highcharts-yaxis-grid">
<path class="highcharts-grid-line" d="M 10 362.5 L 1064 362.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 303.5 L 1064 303.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 245.5 L 1064 245.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 186.5 L 1064 186.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 127.5 L 1064 127.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 69.5 L 1064 69.5" fill="none" opacity="1"></path>
<path class="highcharts-grid-line" d="M 10 10.5 L 1064 10.5" fill="none" opacity="1"></path>
</g>
<rect class="highcharts-plot-border" fill="none" height="352" width="1054" x="10" y="10"></rect>
<g class="highcharts-axis highcharts-xaxis">
<path class="highcharts-tick" d="M 160.5 362 L 160.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 310.5 362 L 310.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 461.5 362 L 461.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 611.5 362 L 611.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 762.5 362 L 762.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 912.5 362 L 912.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 1064.5 362 L 1064.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-tick" d="M 9.5 362 L 9.5 372" fill="none" opacity="1" stroke="#ccd6eb" stroke-width="1"></path>
<path class="highcharts-axis-line" d="M 10 362.5 L 1064 362.5" fill="none" stroke="#ccd6eb" stroke-width="1"></path>
</g>
<g class="highcharts-axis highcharts-yaxis">
<path class="highcharts-axis-line" d="M 10 10 L 10 362" fill="none"></path>
</g>
<g class="highcharts-series-group">
<g class="highcharts-series highcharts-series-0 highcharts-column-series highcharts-color-undefined remain-score-color highcharts-tracker" clip-path="url(#highcharts-jshwdmt-17)" transform="translate(10,10) scale(1 1)">
<rect class="highcharts-point highcharts-color-0" fill="#f3f3f4" height="293" stroke="#bbb" stroke-width="1" width="50" x="49.5" y="59.5"></rect>
<rect class="highcharts-point highcharts-color-1" fill="#f3f3f4" height="59" stroke="#bbb" stroke-width="1" width="50" x="200.5" y="293.5"></rect>
<rect class="highcharts-point highcharts-color-2" fill="#f3f3f4" height="47" stroke="#bbb" stroke-width="1" width="50" x="350.5" y="305.5"></rect>
<rect class="highcharts-point highcharts-color-3" fill="#f3f3f4" height="47" stroke="#bbb" stroke-width="1" width="50" x="501.5" y="305.5"></rect>
<rect class="highcharts-point highcharts-color-4" fill="#f3f3f4" height="47" stroke="#bbb" stroke-width="1" width="50" x="652.5" y="305.5"></rect>
<rect class="highcharts-point highcharts-color-5" fill="#f3f3f4" height="47" stroke="#bbb" stroke-width="1" width="50" x="802.5" y="305.5"></rect>
<rect class="highcharts-point highcharts-color-6" fill="#f3f3f4" height="47" stroke="#bbb" stroke-width="1" width="50" x="953.5" y="305.5"></rect>
</g>
<g class="highcharts-markers highcharts-series-0 highcharts-column-series highcharts-color-undefined remain-score-color" clip-path="none" transform="translate(10,10) scale(1 1)"></g>
<g class="highcharts-series highcharts-series-1 highcharts-column-series highcharts-color-undefined your-score-color highcharts-tracker" clip-path="url(#highcharts-jshwdmt-17)" transform="translate(10,10) scale(1 1)">
<rect class="highcharts-point highcharts-color-0" fill="rgba(255, 169, 24, 1.0)" height="0" stroke="#bbb" stroke-width="1" width="50" x="49.5" y="352.5"></rect>
<rect class="highcharts-point highcharts-color-1" fill="rgba(75, 189, 65, 1.0)" height="0" stroke="#bbb" stroke-width="1" width="50" x="200.5" y="352.5"></rect>
<rect class="highcharts-point highcharts-color-2" fill="rgba(228, 57, 57, 1.0)" height="0" stroke="#bbb" stroke-width="1" width="50" x="350.5" y="352.5"></rect>
<rect class="highcharts-point highcharts-color-3" fill="rgba(204, 179, 51, 1.0)" height="0" stroke="#bbb" stroke-width="1" width="50" x="501.5" y="352.5"></rect>
<rect class="highcharts-point highcharts-color-4" fill="rgba(51, 204, 179, 1.0)" height="0" stroke="#bbb" stroke-width="1" width="50" x="652.5" y="352.5"></rect>
<rect class="highcharts-point highcharts-color-5" fill="rgba(204, 51, 153, 1.0)" height="0" stroke="#bbb" stroke-width="1" width="50" x="802.5" y="352.5"></rect>
<rect class="highcharts-point highcharts-color-6" fill="rgba(80, 152, 216, 1.0)" height="0" stroke="#bbb" stroke-width="1" width="50" x="953.5" y="352.5"></rect>
</g>
<g class="highcharts-markers highcharts-series-1 highcharts-column-series highcharts-color-undefined your-score-color" clip-path="none" transform="translate(10,10) scale(1 1)"></g>
</g>
<g class="highcharts-stack-labels" transform="translate(10,10)" visibility="visible">
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="75" y="53">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="75" y="53">
50
</tspan>
<tspan x="75" y="53">
50
</tspan>
</text>
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="226" y="287">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="226" y="287">
10
</tspan>
<tspan x="226" y="287">
10
</tspan>
</text>
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="376" y="299">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="376" y="299">
8
</tspan>
<tspan x="376" y="299">
8
</tspan>
</text>
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="527" y="299">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="527" y="299">
8
</tspan>
<tspan x="527" y="299">
8
</tspan>
</text>
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="678" y="299">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="678" y="299">
8
</tspan>
<tspan x="678" y="299">
8
</tspan>
</text>
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="828" y="299">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="828" y="299">
8
</tspan>
<tspan x="828" y="299">
8
</tspan>
</text>
<text style="font-size:11px;font-weight:bold;color:gray;fill:gray;" text-anchor="middle" transform="translate(0,0)" x="979" y="299">
<tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2px" x="979" y="299">
8
</tspan>
<tspan x="979" y="299">
8
</tspan>
</text>
</g>
<g class="highcharts-data-labels highcharts-series-0 highcharts-column-series highcharts-color-undefined remain-score-color highcharts-tracker" opacity="1" transform="translate(10,10) scale(1 1)"></g>
<g class="highcharts-data-labels highcharts-series-1 highcharts-column-series highcharts-color-undefined your-score-color highcharts-tracker" opacity="1" transform="translate(10,10) scale(1 1)"></g>
<g class="highcharts-axis-labels highcharts-xaxis-labels">
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" x="85.28571428571429" y="381">
<tspan>
Language
</tspan>
</text>
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" x="235.8571428571429" y="381">
<tspan>
Task Achievement
</tspan>
</text>
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" x="386.42857142857144" y="381">
<tspan>
Collaboration
</tspan>
</text>
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" x="537" y="381">
<tspan>
Critical Thinking
</tspan>
</text>
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" x="687.5714285714287" y="381">
<tspan>
Creativity
</tspan>
</text>
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" x="838.1428571428572" y="381">
<tspan>
Digital Literacy
</tspan>
</text>
<text opacity="1" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" x="988.7142857142857" y="381">
<tspan>
Self Development
</tspan>
</text>
</g>
<g class="highcharts-axis-labels highcharts-yaxis-labels"></g>
<g class="highcharts-label highcharts-tooltip highcharts-color-6" opacity="0" style="cursor:default;pointer-events:none;white-space:nowrap;" transform="translate(942,-9999)" visibility="visible">
<path class="highcharts-label-box highcharts-tooltip-box" d="M 3.5 0.5 L 90.5 0.5 C 93.5 0.5 93.5 0.5 93.5 3.5 L 93.5 29.5 C 93.5 32.5 93.5 32.5 90.5 32.5 L 52.5 32.5 46.5 38.5 40.5 32.5 3.5 32.5 C 0.5 32.5 0.5 32.5 0.5 29.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" fill="none" isshadow="true" stroke="#000000" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path>
<path class="highcharts-label-box highcharts-tooltip-box" d="M 3.5 0.5 L 90.5 0.5 C 93.5 0.5 93.5 0.5 93.5 3.5 L 93.5 29.5 C 93.5 32.5 93.5 32.5 90.5 32.5 L 52.5 32.5 46.5 38.5 40.5 32.5 3.5 32.5 C 0.5 32.5 0.5 32.5 0.5 29.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" fill="none" isshadow="true" stroke="#000000" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path>
<path class="highcharts-label-box highcharts-tooltip-box" d="M 3.5 0.5 L 90.5 0.5 C 93.5 0.5 93.5 0.5 93.5 3.5 L 93.5 29.5 C 93.5 32.5 93.5 32.5 90.5 32.5 L 52.5 32.5 46.5 38.5 40.5 32.5 3.5 32.5 C 0.5 32.5 0.5 32.5 0.5 29.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" fill="none" isshadow="true" stroke="#000000" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path>
<path class="highcharts-label-box highcharts-tooltip-box" d="M 3.5 0.5 L 90.5 0.5 C 93.5 0.5 93.5 0.5 93.5 3.5 L 93.5 29.5 C 93.5 32.5 93.5 32.5 90.5 32.5 L 52.5 32.5 46.5 38.5 40.5 32.5 3.5 32.5 C 0.5 32.5 0.5 32.5 0.5 29.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" fill="rgba(247,247,247,0.85)" stroke="#f3f3f4" stroke-width="1"></path>
<text style="font-size:12px;color:#333333;fill:#333333;" x="8" y="20">
<tspan>
No score yet!
</tspan>
</text>
</g></svg>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="project04-tab" role="tabpanel">
<div class="box-chart text-center" id="box-projectChart04">
<h3 class="text-center"><strong>Project 04 Assessment</strong> <span class="percent"></span></h3>
<div class="chart-container" id="projectChart04">
<em>Empty</em>
</div>
</div>
</div><!-- /Projects Chart -->
<!-- Project slider -->
<div id="project-slider-menu" style="display: none;">
<ul>
<li><button class="btn btn-sm slider-empty" onclick="showProjectSlider(19,0, this)" style="color:#fff; background-color:#f3f3f4" type="button">Language</button></li>
<li><button class="btn btn-sm slider-empty" onclick="showProjectSlider(13,0, this)" style="color:#fff; background-color:#f3f3f4" type="button">Task Achievement</button></li>
<li><button class="btn btn-sm slider-empty" onclick="showProjectSlider(14,0, this)" style="color:#fff; background-color:#f3f3f4" type="button">Collaboration</button></li>
<li><button class="btn btn-sm slider-empty" onclick="showProjectSlider(15,0, this)" style="color:#fff; background-color:#f3f3f4" type="button">Critical Thinking</button></li>
<li><button class="btn btn-sm slider-empty" onclick="showProjectSlider(16,0, this)" style="color:#fff; background-color:#f3f3f4" type="button">Creativity</button></li>
<li><button class="btn btn-sm slider-empty" onclick="showProjectSlider(17,0, this)" style="color:#fff; background-color:#f3f3f4" type="button">Digital Literacy</button></li>
<li><button class="btn btn-sm slider-empty" onclick="showProjectSlider(18,0, this)" style="color:#fff; background-color:#f3f3f4" type="button">Self Development</button></li>
</ul>
</div>
<div class="carousel slide" id="carousel-example-generic">
<!-- Wrapper for slides -->
<div class="carousel-inner" id="project-slider-data" role="listbox"></div><!-- Controls -->
<a class="left carousel-control" data-slide="prev" href="#carousel-example-generic" role="button" style="display: none;"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#carousel-example-generic" role="button" style="display: none;"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span></a>
</div><!-- /Project slider -->
<div class="tab-pane fade in" id="project01-tab" role="tabpanel">
<div class="box-chart text-center" id="box-proj-module-chart">
<h3 class="text-center"><strong>Student's project01</strong></h3>
<div id="project01">
Hello, project01
</div>
</div>
</div>
<div class="tab-pane fade in" id="project02-tab" role="tabpanel">
<div class="box-chart text-center" id="box-proj-module-chart">
<h3 class="text-center"><strong>Student's project02</strong></h3>
<div id="project02">
Hello, project02
</div>
</div>
</div>
<div class="tab-pane fade in" id="project03-tab" role="tabpanel">
<div class="box-chart text-center" id="box-proj-module-chart">
<h3 class="text-center"><strong>Student's project03</strong></h3>
<div id="project03">
Hello, project03
</div>
</div>
</div>
<div class="tab-pane fade in" id="project04-tab" role="tabpanel">
<div class="box-chart text-center" id="box-proj-module-chart">
<h3 class="text-center"><strong>Student's project04</strong></h3>
<div id="project04">
Hello, project04
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- Use any element to open/show the overlay navigation menu -->
<!--<span onclick="openNav()">open</span>-->
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="card" style="width: 100rem;">
<h4>Super Juniors Level 3 Module B <span> Start Date: 14/04/2017 --- End Date: 12/09-2017</span> </h4>
<div class="table-responsive">
<table class="table table-bordred table-striped" id="mytable">
<thead>
<th>Attendance
<br>
<span hidden >worth 0% of course</span>
</th>
<th>Project 1
<br>
<span hidden >worth 5% of course
Sat, 16/09/2017</span>
</th>
<th>Project 2
<br>
<span hidden >worth 5% of course Sat, 16/09/2017</span>
</th>
<th>Mid Module Test
<br>
<span hidden >worth 30% of course
Sat, 16/09/2017</span>
</th>
<th>Project 3
<br>
<span hidden >worth 5% of course
Sat, 16/09/2017</span>
</th>
<th>Project 4
<br>
<span hidden >worth 5% of course
Sat, 16/09/2017</span>
</th>
<th>End of Module Test
<br>
<span hidden >worth 30% of course
Sat, 16/09/2017</span>
</th>
<th>Mock Cambridge Test
<br>
<span hidden >worth 0% of course
Sat, 16/09/2017</span>
</th>
</thead>
<tbody>
<tr>
<td id="attendance-tab-btn" onclick="openNav(id)"><span class="percent-btn example">47%</span></td>
<td id="project01-tab-btn" onclick="openNav(id)"><span class="percent-btn">30%</span></td>
<td id="project02-tab-btn" onclick="openNav(id)"><span class="percent-btn">40%</span></td>
<td id="mid-tab-btn" onclick="openNav(id)"><span class="percent-btn">80%</span></td>
<td id="project03-tab-btn" onclick="openNav(id)"><span class="percent-btn">100%</span></td>
<td id="project04-tab-btn" onclick="openNav(id)"><span class="percent-btn">70%</span></td>
<td id="end-tab-btn" onclick="openNav(id)"><span class="percent-btn">90%</span></td>
<td id="cambridge-tab-btn" onclick="openNav(id)"><span class="percent-btn">0%</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card" style="width: 100rem;">
<h4>Super Juniors Level 3 Module A <span> Start Date: 12/02/2016 --- End Date: 12/04-2017</span> </h4>
<div class="table-responsive">
<table class="table table-bordred table-striped" id="mytable">
<thead>
<tr>
<th>Attendance
<br>
<span hidden >worth 0% of course
</span>
</th>
<th>Mid Module Test
<br>
<span hidden >worth 35% of course
Sat, 16/09/2017</span>
</th>
<th>End of Module Test
<br>
<span hidden >worth 35% of course
Sat, 16/09/2017</span>
</th>
<th>Mock Cambridge Test
<br>
<span hidden >worth 0% of course
Sat, 16/09/2017</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td >30%</td>
<td>40%</td>
<td>80%</td>
<td>90%</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card" style="width: 100rem;">
<h4>Super Juniors Level 2 Module B <span> Start Date: 12/02/2016 --- End Date: 12/04-2017</span> </h4>
<div class="table-responsive">
<table class="table table-bordred table-striped" id="mytable">
<thead>
<tr>
<th>Attendance
<br>
<span hidden>worth 0% of course
</span>
</th>
<th>Mid Module Test
<br>
<span hidden >worth 35% of course
Sat, 16/09/2017</span>
</th>
<th>End of Module Test
<br>
<span hidden >worth 35% of course
Sat, 16/09/2017</span>
</th>
<th>Mock Cambridge Test
<br>
<span hidden >worth 0% of course
Sat, 16/09/2017</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>30%</td>
<td>40%</td>
<td>80%</td>
<td>90%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
th {
font-size:10px;
text-align:center;
color:#8985A6;
}
span {
color:grey;
font-weight:normal;
text-align:center;
font-size:10px;
line-height:1.5;
}
.percent-btn{
color:#8985A6;
font-weight:bold;
background-color:white;
padding:8px;
border-radius:100%;
box-shadow: 1px 1px 4px grey;
font-size:18px;
}
td {
color:#8985A6;
font-weight:bold;
text-align:center;
cursor: pointer;
background-color:#FDFDFF;
margin-bottom:210px;
}
.card {
background-color:#FDFDFF;
border-radius:5px;
padding:10px;
margin-top:20px;
border: 0.5px solid lightgrey;
}
h4 {
color:#8985A6;
font-weight:bold;
}
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 0%;
width: 100%;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
position: relative;
top: 5%; /* 25% from the top */
width: 100%; /* 100% width */
text-align: center; /* Centered text/links */
margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}
/* The navigation links inside the overlay */
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block; /* Display block instead of inline */
transition: 0.3s; /* Transition effects on hover (color) */
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
/* Position the close button (top right corner) */
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
z-index:100;
}
/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
.highcharts-root {
width:92% !important;
}
$(document).ready(function(){
$("#mytable #checkall").click(function () {
if ($("#mytable #checkall").is(':checked')) {
$("#mytable input[type=checkbox]").each(function () {
$(this).prop("checked", true);
});
} else {
$("#mytable input[type=checkbox]").each(function () {
$(this).prop("checked", false);
});
}
});
$("[data-toggle=tooltip]").tooltip();
});
$(document).ready(function(){
if(!$('.example').hasClass('animated')){
$('.example').addClass('animated');
$('.example').stop().effect('shake', {distance:10}, 200);
}
}, function(){
$('.example').removeClass('animated');
});
var globalId;
/* Open when someone clicks on the span element */
function openNav(thing) {
globalId = thing.replace("-btn","");
console.log(globalId);
document.getElementById("myNav").style.height = "100%";
$('#'+globalId).addClass('active');
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
$('#'+globalId).removeClass('active');
document.getElementById("myNav").style.height = "0%";
globalId = "";
}
