JezK

Edit File: crm_results.ctp

<style>
/* exams */

.results_table thead {
    background-color: #14295e;
    color:white;
}

.results_table>tbody>tr:nth-child(odd)>td, .results_table>tbody>tr:nth-child(odd)>th {
    background-color: #ccd2e0;
    color:#000;
}
.results_table>tbody>tr:nth-child(even)>td, .results_table>tbody>tr:nth-child(even)>th {
    color:#14295e;
}
.results_table>thead>tr>th, .results_table>tbody>tr>th, .results_table>thead>tr>td, .results_table>tbody>tr>td{
    padding:15px 10px;
}
.blue td{
    color:#14295e;
}
.border-xy{
    border-top: 1px solid #ccd2e0;
    border-bottom: 1px solid #ccd2e0;
    padding:10px 0;
}
.blue{   
    color:#14295e;
}
.canvasjs-chart-credit{
    display:none;
}
#chartContainer{
    background:unset !important;
}
</style>

<?php echo $this->Html->scriptBlock("function closeExamWindow(){var ww = window.open(window.location, '_self'); ww.close();}", array('inline' => true));
if ($isClose == "Yes") {
    echo $this->Html->scriptBlock("setTimeout(function(){closeExamWindow(); }, 1500);", array('inline' => true));
} ?>

<div class="col-md-12 ">
  <table class="table table-striped results_table">
    <thead>
      <tr>
        <th>Sections</th>
        <th>Total Questions</th>
        <th>Correctly Answered</th>
        <th>Correctly Answered %</th>
        <th>Marked Questions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Sections 1 - Orthopedic</td>
        <td>10</td>
        <td>5</td>
        <td>50%</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Sections 2 - Orthopedic</td>
        <td>10</td>
        <td>5</td>
        <td>50%</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Sections 3 - Orthopedic</td>
        <td>10</td>
        <td>5</td>
        <td>50%</td>
        <td>1</td>
      </tr>
      <tr class="blue">
        <td>Total</td>
        <td>30</td>
        <td>15</td>
        <td>50%</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>
<div class="col-md-12">
    <h2 class="border-xy blue">Passing Score - 72%</h2>
    <h4 class="blue">Overall Report</h4>
    <div class="row">
        <div class="col-sm-6">
            <h3 class="blue">Accuracy : 72%</h3>
            <div id="chartContainer"  style="height: 300px; width: 100%;float:left;"></div>
            <p>Out of 40 Questions, You Answered</p>
            <h5 class="text-dark"><strong>32 Questions Correctly and 12 Questions Incorrectly</strong></h5>
        </div>
    </div>
</div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script>
window.onload = function () {
    CanvasJS.addColorSet("redgreenShades", ["#00a650", "#ee1c25"]);
    var chart = new CanvasJS.Chart("chartContainer", {
    colorSet: "redgreenShades",
	animationEnabled: true,
	title:{
		text: "",
		horizontalAlign: "left"
	},
    legend: {
        // dockInsidePlotArea: true,
       verticalAlign: "center",
       horizontalAlign: "right" // "top" , "bottom"
     },
	data: [{
        indexLabelLineThickness: 0,
        showInLegend: true,
		type: "doughnut",
		startAngle:270,
		// innerRadius: 60,
		indexLabelFontSize: 17,
        legend: {
            fontSize: 50,
            type:'circle',
        },
		// indexLabel: "{label} - #percent%",
		// toolTipContent: "<b>{label}:</b> {y} (#percent%)",
		dataPoints: [
			{ y: 67, legendText: "Correct : 32", legendMarkerType: "circle" },
			{ y: 28, legendText: "Incorrect : 12", legendMarkerType: "circle"}
			
		],
        
	}]
});
chart.render();

}
</script>