"Bootstrap Snippet for Datatable"
Bootstrap 3.3.0 Snippet by supertopoz

<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 = ""; }

Related: See More


Questions / Comments: