<?php
/**
*
* Title : Test Report
* Developer : Rohit Kashyap
* Date : 04 Mar,2020
* Description : User test report and their sten score with highchart.
*/
// ini_set('dsiplay_errors', 1);
// error_reporting(E_ALL);
include_once('../wp-config.php');
global $wpdb;
$PSY_SP_QUESTION = $wpdb->prefix . PSY_SP_QUESTION;
$PSY_EXAMS = $wpdb->prefix . PSY_EXAMS;
$PSY_ABILITY = $wpdb->prefix . PSY_ABILITY;
$PSY_ABILITY_CLASS = $wpdb->prefix . PSY_ABILITY_CLASS;
$PSY_USERS_DETAILS = $wpdb->prefix . PSY_USERS_DETAILS;
$PSY_ABILITY_RAW_SCORE = $wpdb->prefix . PSY_ABILITY_RAW_SCORE;
$PSY_TEST_GEN_TEST_TAKEN = $wpdb->prefix . PSY_TEST_GEN_TEST_TAKEN;
$PSY_INTEREST_TEST_OPTION_MEAN = $wpdb->prefix . PSY_INTEREST_TEST_OPTION_MEAN;
$PSY_TEST_GEN_TEST_TAKEN_QUESTION_ANSWER = $wpdb->prefix . PSY_TEST_GEN_TEST_TAKEN_QUESTION_ANSWER;
$testID = $_REQUEST['testId'];
$user_id = $wpdb->get_var("select user_id from $PSY_TEST_GEN_TEST_TAKEN where test_taken_id='$testID'");
$curDate = date('Y-m-d H:i:s');
if (is_numeric($testID) && strlen($testID) <= 5) {
$checkTest = $wpdb->get_var("SELECT count(test_taken_id) FROM $PSY_TEST_GEN_TEST_TAKEN where test_taken_id='$testID' and user_id='$user_id' and test_type='APT' and status='Y'");
if ($checkTest != '0') {
$userData = $wpdb->get_row("SELECT ud.first_name,ud.last_name,ud.date_of_birth FROM $PSY_USERS_DETAILS as ud where user_id='$user_id'");
$studentName = $userData->first_name . ' ' . $userData->last_name;
$dob = date('d F, Y', strtotime($userData->date_of_birth));
$getInterestDesc = $wpdb->get_results("SELECT field_name,field_desc FROM $PSY_INTEREST_TEST_OPTION_MEAN where status='1'");
$getTestDetails = $wpdb->get_row("SELECT tt.total_questions,tt.class_id,tt.time_taken_in_seconds,tt.start_date,e.category_name,cl.class_name FROM $PSY_TEST_GEN_TEST_TAKEN as tt LEFT JOIN $PSY_EXAMS as e on e.exam_category_id=tt.exam_category_id LEFT JOIN $PSY_ABILITY_CLASS as cl on cl.class_id=tt.class_id where tt.test_taken_id='$testID' and tt.status='Y'");
$class_id = $getTestDetails->class_id != '0' ? $getTestDetails->class_id : '9';
$class = $getTestDetails->class_name;
$dateAttempt = date('d F, Y', strtotime($getTestDetails->start_date));
$getsubject = $wpdb->get_results("SELECT e.category_name,e.exam_category_id from $PSY_EXAMS as e LEFT JOIN $PSY_ABILITY as ab on ab.ref_id=e.exam_category_id where e.parent_id='48282' order by e.display_order asc");
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<title>Aptitude Test Report - Selfanalyse</title>
<link rel="stylesheet" href="/aptitude-test/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<script src="/aptitude-test/js/jquery.min.js"></script>
<script src="/aptitude-test/js/bootstrap.min.js"></script>
<script src="/aptitude-test/js/highcharts.js"></script>
<script src="/aptitude-test/js/highcharts-3d.js"></script>
</head>
<body>
<style>
.bold-txt {
font-weight: bold;
color: #000;
}
.col-md-2 {
width: 13.666667% !important;
}
/* MARGIN CSS */
.mt-20 {
margin-top: 20px
}
.mb-20 {
margin-bottom: 20px
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th,
td {
text-align: left;
padding: 8px;
}
.header-logo {
width: 40%;
float: right;
}
.chart-header-box {
float: left;
width: 100%;
border-radius: 4px;
background: #fff;
padding: 10px;
border-bottom: 1px solid #cecece;
}
.chart-header-box h4 {
font-size: 16px;
}
.intro-box {
margin: 0;
padding-left: 14px;
background: #fff;
padding: 10px;
float: left;
width: 100%;
}
.intro-box h2 {
margin: 0;
color: #464646;
font-weight: 600;
font-size: 24px;
padding: 0 0 20px;
}
.one-circle-box {
border-radius: 50%;
text-align: center;
padding: 24px 0;
width: 140px;
margin: 0 auto;
}
.one-circle-box i {
font-size: 28px;
}
.chart-box {
border: 1px solid #cccccc;
box-shadow: 0 2px 4px 2px #c7c7c7;
margin: 2em 0;
}
#container {
/* height: 550px; */
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
svg:not(:root) {
overflow: visible !important;
}
.highcharts-container {
overflow: visible !important;
}
.intro-box h5 {
margin: 0;
color: #fff;
font-size: 18px;
padding: 10px;
text-align: center;
background: #f1802b;
}
.ability-desc-box h2 {
margin: 0;
color: #464646;
font-weight: 600;
font-size: 20px;
padding: 30px 0 10px;
}
.intro-box p {
margin: 0;
font-size: 16px;
}
.ability-desc-box {
border-bottom: 1px solid #434348;
padding-bottom: 20px;
}
.sten-score {
border: 1px solid #b1b1b1;
box-shadow: 0 2px 4px 2px #9a9a9a;
padding: 10px;
margin-top: 1em;
/* background: #90ed7d; */
}
.sten-score h3 {
font-size: 18px;
margin: 0;
padding-bottom: 10px;
}
.description-ul {
padding: 20px;
}
.description-ul li {
list-style: decimal;
color: #000;
margin-bottom: 20px;
font-size: 15px;
}
.test-head {
font-size: 26px !important;
padding-bottom: 10px;
}
.chart-header-box h6 {
margin: 0;
font-size: 17px;
padding: 10px 0 30px;
line-height: 24px;
font-weight: 600;
}
.back-home-btn {
font-size: 14px;
background: #0085f7;
padding: 10px;
display: table;
margin: 0 auto;
color: #fff;
cursor: pointer;
border-radius: 4px;
font-weight: bold;
}
.fb-share {
background: #3b5998;
border-radius: 3px;
font-weight: 600;
padding: 5px 8px;
float: right;
position: relative;
top: -4px;
display: inline-flex;
}
.fb-share:hover {
cursor: pointer;
background: #213A6F
}
.fb-share svg {
width: 18px;
fill: white;
vertical-align: middle;
border-radius: 2px
}
.fb-share span {
vertical-align: middle;
color: white;
font-size: 14px;
padding: 0 3px
}
/* aptitude-test CSS */
#btnPrint {
float: right;
margin-bottom: 12px;
background: #154479;
border: none;
color: #fff;
padding: 4px 10px;
font-weight: 600;
border-radius: 4px;
}
/* END aptitude-test CSS */
</style>
<!-- TOP TABLE SECTION -->
<section style="background: #f1f1f1;padding: 2em 0;">
<div class="container">
<!----User details--->
<div class="row">
<div class="chart-header-box" style="margin-bottom: 2em;">
<div class="col-md-8">
<h4 class="test-head"><?php echo $getTestDetails->category_name; ?></h4>
<h4>Name : <span style="font-weight: bold;"> <?php echo $studentName; ?> </span>, <span> Class :</span> <span style="font-weight: bold;"><?php echo $class ?></span></h4>
<h4>Date : <span style="font-weight: bold;"><?php echo $dateAttempt; ?></span></h4>
</div>
<div class="col-md-4">
<img class="header-logo" src="https://selfanalyse.com/wp-content/themes/psychometrics/images/shine-logo.png" alt="">
</div>
</div>
</div>
<!-----Circles---->
<div class="row">
<div class="intro-box">
<button id="btnPrint" onClick="popOut('/counselor/aptitude-print.php?testId=<?php echo $testID; ?>','Aptitude Test Report', 1200, 650)">Print Preview</button>
<div class="col-md-12">
<?php
$data = array();
$string = array();
foreach ($getsubject as $sub) {
$subject = $sub->exam_category_id;
$abilityData = $wpdb->get_row("SELECT ability_id, instruction, color FROM $PSY_ABILITY where ref_id='$subject'");
$ability_id = $abilityData->ability_id;
$ability_desc = $abilityData->instruction;
$color = $abilityData->color;
$getTestSummary = $wpdb->get_row("SELECT count(case when ttqt.correct_answer=ttqat.answer then 1 end) as correctQn, count(case when ttqt.correct_answer!=ttqat.answer and ttqat.answer!=0 then 1 end) as inCorrectQn, count(case when ttqat.answer=0 then 1 end) as unAttemptQn from $PSY_TEST_GEN_TEST_TAKEN_QUESTION_ANSWER as ttqat Inner join $PSY_SP_QUESTION as ttqt on ttqt.question_id = ttqat.test_question_id where ttqat.test_taken_id='$testID' and ttqat.subject_id='$subject'");
$correctQn = (int) $getTestSummary->correctQn;
$inCorrectQn = $getTestSummary->inCorrectQn;
$unAttemptQn = $getTestSummary->unAttemptQn;
$rawScore = $wpdb->get_var("SELECT sten_score FROM $PSY_ABILITY_RAW_SCORE where $correctQn BETWEEN raw_score_start and raw_score_end and class_id='$class_id' and ability_id='$ability_id'");
$stenScore = (int) $rawScore;
//$stenScore;
$data[] = array("y" => $stenScore, "name" => $sub->category_name, "ability_id" => $ability_id, "topic_id" => $sub->exam_category_id, "color" => $color);
//color condition for raw score
if ($rawScore <= 3 && $rawScore >= 0) {
$backColor = '#e4d354';
} else if ($rawScore <= 7 && $rawScore >= 4) {
$backColor = '#f7a35c';
} else if ($rawScore <= 10 && $rawScore >= 8) {
$backColor = '#90ed7d';
}
$percentage = ($stenScore / 10 * 100) . '%';
$showcategory = 'Current Ability - ' . $percentage;
$array = array("y" => $stenScore, "name" => $showcategory, "color" => $color);
$remainValue = 10 - $stenScore;
$remainPercent = ($remainValue / 10 * 100) . '%';
$remainText = 'Area of Improvement - ' . $remainPercent;
?>
<div style="float:left; width:14%; border: 1px solid #ccc; margin-left: 3px;">
<figure class="highcharts-figure">
<div id="container_<?php echo $ability_id; ?>" style="height: 250px;"></div>
</figure>
</div>
<script>
// Load the fonts
Highcharts.createElement('link', {
href: 'https://fonts.googleapis.com/css?family=Ubuntu:400,700',
rel: 'stylesheet',
type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);
// Add the background image to the container
Highcharts.addEvent(Highcharts.Chart, 'afterGetContainer', function() {
// eslint-disable-next-line no-invalid-this
this.container.style.background =
'url(https://www.highcharts.com/samples/graphics/sand.png)';
});
Highcharts.theme = {
chart: {
backgroundColor: null,
style: {
fontFamily: 'Ubuntu, sans-serif'
}
},
title: {
style: {
color: 'black',
fontSize: '16px',
fontWeight: 'bold'
}
},
subtitle: {
style: {
color: 'black'
}
},
tooltip: {
borderWidth: 0
},
labels: {
style: {
color: '#6e6e70'
}
},
legend: {
backgroundColor: '#E0E0E8',
itemStyle: {
fontWeight: 'bold',
fontSize: '13px'
}
},
xAxis: {
labels: {
style: {
color: '#6e6e70'
}
}
},
yAxis: {
labels: {
style: {
color: '#6e6e70'
}
}
},
plotOptions: {
series: {
shadow: true
},
candlestick: {
lineColor: '#404048'
},
map: {
shadow: false
}
},
// Highstock specific
navigator: {
xAxis: {
gridLineColor: '#D0D0D8'
}
},
rangeSelector: {
buttonTheme: {
fill: 'white',
stroke: '#C0C0C8',
'stroke-width': 1,
states: {
select: {
fill: '#D0D0D8'
}
}
}
},
scrollbar: {
trackBorderColor: '#C0C0C8'
}
};
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
//pie chart
var options = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
legend: {
align: 'left',
verticalAlign: 'bottom',
floating: false,
width: 150,
layout: 'horizontal',
itemStyle: '{ "word-wrap": "break-word" }',
},
title: {
text: '<?php echo $sub->category_name ?>'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
cursor: 'pointer',
depth: 20,
dataLabels: {
enabled: false,
format: '{point.name}'
},
showInLegend: true
}
},
series: [{
name: 'Sten Score',
colorByPoint: true,
data: [<?php echo json_encode($array); ?>, {
"y": <?php echo $remainValue; ?>,
"name": '<?php echo $remainText; ?>'
}]
}]
}
var chart = Highcharts.chart('container_<?php echo $ability_id; ?>', options);
</script>
<?php
}
?>
</div>
</div>
</div>
<!----highcharts---->
<div class="row">
<div class="intro-box">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="chart-box">
<h5>
Click on Bar chart topic to get more details.
</h5>
<figure class="highcharts-figure">
<div id="container_bar" style="height: 370px;"></div>
</figure>
</div>
</div>
<div class="col-md-2"></div>
<div class="col-md-12">
<div class="ability-desc-box" id="abilityDesc">
</div>
</div>
</div>
</div>
<!---Introduction------>
</div>
</section>
<!-- END TOP TABLE SECTION -->
<script>
function popOut(pageURL, pageTitle,
popupWinWidth, popupWinHeight) {
var left = (screen.width - popupWinWidth) / 2;
var top = (screen.height - popupWinHeight) / 4;
var myWindow = window.open(pageURL, pageTitle,
'resizable=yes, width=' + popupWinWidth +
', height=' + popupWinHeight + ', top=' +
top + ', left=' + left);
}
// Load the fonts
Highcharts.createElement('link', {
href: 'https://fonts.googleapis.com/css?family=Ubuntu:400,700',
rel: 'stylesheet',
type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);
// Add the background image to the container
Highcharts.addEvent(Highcharts.Chart, 'afterGetContainer', function() {
// eslint-disable-next-line no-invalid-this
this.container.style.background =
'url(https://www.highcharts.com/samples/graphics/sand.png)';
});
Highcharts.theme = {
chart: {
backgroundColor: null,
style: {
fontFamily: 'Ubuntu, sans-serif'
}
},
title: {
style: {
color: 'black',
fontSize: '16px',
fontWeight: 'bold'
}
},
subtitle: {
style: {
color: 'black'
}
},
tooltip: {
borderWidth: 0
},
labels: {
style: {
color: '#6e6e70'
}
},
legend: {
backgroundColor: '#E0E0E8',
itemStyle: {
fontWeight: 'bold',
fontSize: '13px'
}
},
xAxis: {
labels: {
style: {
color: '#6e6e70'
}
}
},
yAxis: {
labels: {
style: {
color: '#6e6e70'
}
},
max: 10,
min: 0,
tickInterval: 1
},
plotOptions: {
series: {
shadow: true
},
candlestick: {
lineColor: '#404048'
},
map: {
shadow: false
}
},
// Highstock specific
navigator: {
xAxis: {
gridLineColor: '#D0D0D8'
}
},
rangeSelector: {
buttonTheme: {
fill: 'white',
stroke: '#C0C0C8',
'stroke-width': 1,
states: {
select: {
fill: '#D0D0D8'
}
}
}
},
scrollbar: {
trackBorderColor: '#C0C0C8'
}
};
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
//bar chart
var options_bar = {
chart: {
type: 'column'
},
title: {
text: 'Aptitude<br>Test'
},
xAxis: {
type: 'category',
title: {
text: ''
},
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
series: {
cursor: 'pointer',
colorByPoint: true,
point: {
events: {
click: function() {
// alert(this.options.ability_id);
$.ajax({
type: "POST",
url: "/aptitude-test/test_ability_description.php",
dataType: 'html',
data: {
"ability_id": this.options.ability_id,
"score": this.options.y,
"topic_name": this.options.name
},
success: function(data) {
$("#abilityDesc").html(data);
}
});
}
}
}
}
},
series: [{
name: 'Score',
data: <?php echo json_encode($data); ?>,
pointStart: 1,
}]
}
var chart_bar = Highcharts.chart('container_bar', options_bar);
</script>
<?php
$image_name = $testID . '-bar.png';
$path = '/var/www/selfanalyse/aptitude-test/chart_images/' . $image_name;
if (file_exists($path)) {
echo "";
} else {
?>
<script>
//for image
var option_image = {
infile: {
"chart": {
"type": 'column'
},
"title": {
"text": 'Aptitude<br>Test'
},
"xAxis": {
"type": 'category',
"title": {
"text": ''
},
},
"yAxis": {
"title": {
"text": 'Score'
},
"visible": false
},
"tooltip": {
"pointFormat": '{series.name}: <b>{point.y}</b>'
},
"accessibility": {
"point": {
"valueSuffix": '%'
}
},
"plotOptions": {
"series": {
"cursor": 'pointer',
"colorByPoint": true,
"dataLabels": {
"enabled": true,
"align": 'top',
"color": '#000',
"x": 5,
"format": '{y}/10'
}
}
},
"series": [{
"name": 'Abilities',
"data": <?php echo json_encode($data); ?>,
"pointStart": 1,
}]
},
width: 650,
height: 900,
b64: true
}
//save image
var exportUrl = 'https://export.highcharts.com/';
$.ajax({
type: 'POST',
data: JSON.stringify(option_image),
url: exportUrl,
headers: {
'Content-Type': 'application/json'
},
success: function(data) {
saveImageforserver(data);
},
error: function(err) {}
});
function saveImageforserver(data_image) {
$.ajax({
type: "POST",
url: "/aptitude-test/save_image.php",
dataType: 'JSON',
data: {
"type": "bar",
"test_id": <?php echo $testID ?>,
"image": data_image
},
success: function(data) {}
});
}
</script>
<?php }
?>
</body>
<?php
} else {
echo "Error : No test id found.";
}
} else {
echo "Error : Invalid Test Id.";
}