File: /var/www/selfanalyse/counselor/interest-test-report.php
<?php
/**
*
* Title : Test Report
* Developer : Rohit Kashyap
* Date : 22 Mar,2020
* Description : User test report and their sten score with highchart.
*/
include_once('../wp-config.php');
global $wpdb;
$PSY_USERS_DETAILS = $wpdb->prefix . PSY_USERS_DETAILS;
$PSY_TEST_GEN_TEST_TAKEN = $wpdb->prefix . PSY_TEST_GEN_TEST_TAKEN;
$PSY_INTEREST_TEST_TAKEN_QUSTION_ANSWER = $wpdb->prefix . PSY_INTEREST_TEST_TAKEN_QUSTION_ANSWER;
$PSY_INTEREST_TEST_OPTION_MEAN = $wpdb->prefix . PSY_INTEREST_TEST_OPTION_MEAN;
$PSY_ABILITY_CLASS = $wpdb->prefix . PSY_ABILITY_CLASS;
$testID = $_REQUEST['testId'];
$curDate = date('Y-m-d H:i:s');
$user_id = $wpdb->get_var("select user_id from $PSY_TEST_GEN_TEST_TAKEN where test_taken_id='$testID'");
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='INT' 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));
$getTestDetails = $wpdb->get_row("SELECT tt.start_date,cl.class_name FROM $PSY_TEST_GEN_TEST_TAKEN as tt 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 = $getTestDetails->class_name;
$dateAttempt = date('d F, Y', strtotime($getTestDetails->start_date));
$testDate = date('Y-m-d H:i:s', strtotime($getTestDetails->start_date));
$date1 = str_replace('-', '/', $testDate);
$tomorrow = date('Y-m-d H:i:s', strtotime($date1 . '+1 days'));
$getOption = $wpdb->get_var("SELECT GROUP_CONCAT(answer) FROM $PSY_INTEREST_TEST_TAKEN_QUSTION_ANSWER where test_taken_id='$testID'");
$answers = explode(",", $getOption);
$countValues = array_count_values($answers);
//sort array value in alphabetical order
ksort($countValues);
//remove value of k string in array which is define None
unset($countValues['k']);
unset($countValues['']);
//create data array to show in line graph
$data = array();
foreach ($countValues as $key => $val) {
$getOptionMean = $wpdb->get_row("SELECT option_name, field_name FROM $PSY_INTEREST_TEST_OPTION_MEAN where status='1' and option_name='$key'");
$data[] = array("y" => $val, "name" => $getOptionMean->field_name);
}
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<title>Interest 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/exporting.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%;
margin-top: 2em;
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
}
.belowChartDiv {
border: 1px solid #607D8B;
padding: 5px;
}
.chrtDiv1 {
font-weight: bold;
color: #4CAF50;
}
.chrtDiv2 {
font-weight: bold;
color: #FF5722;
text-align: center;
}
.chrtDiv3 {
font-weight: bold;
color: #FFC107;
text-align: right;
}
/* 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;" id="main">
<div class="container">
<!----User details--->
<div class="row">
<div class="chart-header-box">
<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="http://staging.shinemetrics.com/wp-content/themes/psychometrics/images/shine-logo.png" alt="">
</div>
</div>
</div>
<div class="row">
<div class="intro-box">
<button id="btnPrint" onClick="popOut('/counselor/interest-print.php?testId=<?php echo $testID; ?>','Interest Test Report', 1200, 650)">Print Preview</button>
<div class="col-md-12">
<div class="chart-box">
<figure class="highcharts-figure">
<div id="container" style="height: 500px;"></div>
<div class="col-md-12 belowChartDiv">
<div class="col-md-4 chrtDiv1">High Interest Area (16-20)</div>
<div class="col-md-4 chrtDiv2">Average Interest Area (5-15)</div>
<div class="col-md-4 chrtDiv3">Below Average Interest Area (0-4)</div>
</div>
<!-- <img id="image" alt=""> -->
</figure>
</div>
</div>
<!-- <div class="col-md-2"></div> -->
</div>
</div>
<!---Introduction------>
<div class="row">
<div class="intro-box">
<div class="col-md-12">
<h2>Interest Description</h2>
<p>The various fields of career can be divided into 10 broad areas. Different areas require different set of abilities to be able to do well and succeed. It is to be kept in mind that if one is focused and passionate about a particular field then with enough hard work and training it can be achieved.</p>
<ul class="description-ul">
<?php
foreach ($countValues as $optionvalue => $show) {
$getInterestDesc = $wpdb->get_row("SELECT field_name,field_desc FROM $PSY_INTEREST_TEST_OPTION_MEAN where status='1' and option_name='$optionvalue'");
?>
<li> <span class="bold-txt"> <?php echo $getInterestDesc->field_name ?> </span> – <?php echo $getInterestDesc->field_desc ?></li>
<?php
}
?>
</ul>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript">
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: '#607D8B',
style: {
color: '#fff',
fontFamily: 'Ubuntu, sans-serif'
}
},
title: {
style: {
color: '#FFEB3B',
fontSize: '20px',
fontWeight: 'bold'
}
},
tooltip: {
borderWidth: 0
},
legend: {
itemStyle: {
color: '#FFEB3B',
}
},
xAxis: {
labels: {
style: {
color: '#FFEB3B',
fontSize: '14px',
fontWeight: 'bold',
}
}
},
yAxis: {
labels: {
style: {
color: '#FFEB3B',
fontWeight: 'bold',
}
},
max: 20,
min: 0,
tickInterval: 1
},
};
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
var options = {
title: {
text: 'Interest Test'
},
xAxis: {
type: 'category',
title: {
text: ''
},
},
tooltip: {
pointFormat: 'Score: <b>{point.y}</b>'
},
series: [{
data: <?php echo json_encode($data); ?>,
name: 'Interest Area',
pointStart: 1,
color: '#FFEB3B',
}]
}
var chart = Highcharts.chart('container', options);
$("#share_line").click(function() {
var data = {
options: JSON.stringify(options),
width: 800,
height: 500,
filename: 'test.png',
type: 'image/png',
async: true
};
var exportUrl = 'https://export.highcharts.com/';
$.post(exportUrl, data, function(data) {
var imageUrl = exportUrl + data;
console.log(imageUrl)
var urlCreator = window.URL || window.webkitURL;
//document.querySelector("#image").src = imageUrl;
//window.location = "https://wa.me/?text=" + encodeURIComponent(imageUrl);
window.open('https://www.facebook.com/sharer/sharer.php?u=' + imageUrl,
'facebook-share-dialog',
'width=800,height=600'
);
return false;
// fetch(imageUrl).then(response => response.blob()).then(data => {
// console.log(data)
// });
});
});
</script>
<?php
$image_name = $testID . '-line.png';
$path = '/var/www/selfanalyse/interest-test/chart_images/' . $image_name;
if (file_exists($path)) {
echo "";
} else {
?>
<script>
var options_for_image = {
infile: {
"title": {
"text": 'Interest Test'
},
"xAxis": {
"type": 'category',
"title": {
"text": ''
},
},
"tooltip": {
"pointFormat": 'Score: <b>{point.y}</b>'
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true,
"inside": true
}
}
},
"series": [{
"data": <?php echo json_encode($data); ?>,
"name": 'Interest Area',
"pointStart": 1,
}]
},
width: 650,
height: 900,
b64: true
}
//save image
var exportUrl = 'https://export.highcharts.com/';
$.ajax({
type: 'POST',
data: JSON.stringify(options_for_image),
url: exportUrl,
headers: {
'Content-Type': 'application/json'
},
success: function(data) {
saveImageforserver(data);
},
error: function(err) {
}
});
function saveImageforserver(data_image) {
$.ajax({
type: "POST",
url: "/interest-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.";
}
?>