<?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');
if (is_user_logged_in()) {
$user_id = $current_user->ID;
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'];
$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,cl.class_name FROM $PSY_USERS_DETAILS as ud LEFT JOIN $PSY_ABILITY_CLASS as cl on cl.class_id=ud.current_education_level where user_id='$user_id'");
$studentName = $userData->first_name . ' ' . $userData->last_name;
$dob = date('d F, Y', strtotime($userData->date_of_birth));
$class = $userData->class_name;
$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 FROM $PSY_TEST_GEN_TEST_TAKEN as tt LEFT JOIN $PSY_EXAMS as e on e.exam_category_id=tt.exam_category_id where tt.test_taken_id='$testID' and tt.status='Y'");
$class_id = $getTestDetails->class_id != '0' ? $getTestDetails->class_id : '9';
$dateAttempt = date('d F, Y', strtotime($getTestDetails->start_date));
$seconds = $getTestDetails->time_taken_in_seconds;
$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'));
$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.exam_category_id");
?>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<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;
display: inline-block;
position: static;
}
.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
}
</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 Attempt : <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>
<?php
//if ($curDate >= $tomorrow) {
?>
<button id="btnPrint" onClick="popOut('/aptitude-test/print_page.php?testId=<?php echo $testID; ?>','Aptitude Test Report', 1200, 650)">Print Preview</button>
<!-----Circles 7---->
<div class="row">
<div class="intro-box">
<?php
$data = array();
$array = array();
foreach ($getsubject as $sub) {
$subject = $sub->exam_category_id;
$abilityData = $wpdb->get_row("SELECT ability_id,instruction FROM $PSY_ABILITY where ref_id='$subject'");
$ability_id = $abilityData->ability_id;
$ability_desc = $abilityData->instruction;
// echo "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'";
// echo "<br>";
$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 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';
}
$showcategory = 'Current Ability - ' . $stenScore;
$array = array("y" => $stenScore, "name" => $showcategory);
$remainValue = 10 - $stenScore;
$remainText = 'Area of Improvement - ' . $remainValue;
?>
<div class="col-md-2">
<!-- <div class="one-circle-box" style="border: 3px solid <?php echo $backColor; ?>;">
<i class="fa fa-chart-line" style="color: <?php echo $backColor; ?>;"></i>
<h4><?php echo $rawScore; ?></h4>
<span><?php echo $sub->category_name ?></span>
</div> -->
<figure class="highcharts-figure">
<div id="container_<?php echo $ability_id; ?>" style="height: 200px;"></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: {
itemStyle: {
fontSize: '5px',
font: '5pt Trebuchet MS, Verdana, sans-serif',
color: '#000'
}
},
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>
<!-----Circles 2---->
<div class="intro-box">
<?php
$data = array();
$array = array();
foreach ($getsubject as $sub) {
$subject = $sub->exam_category_id;
$abilityData = $wpdb->get_row("SELECT ability_id,instruction FROM $PSY_ABILITY where ref_id='$subject'");
$ability_id = $abilityData->ability_id;
$ability_desc = $abilityData->instruction;
// echo "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'";
// echo "<br>";
$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 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';
}
$showcategory = 'Current Ability - ' . $stenScore;
$array = array("y" => $stenScore, "name" => $showcategory);
$remainValue = 10 - $stenScore;
$remainText = 'Area of Improvement - ' . $remainValue;
?>
<div class="col-md-6">
<!-- <div class="one-circle-box" style="border: 3px solid <?php echo $backColor; ?>;">
<i class="fa fa-chart-line" style="color: <?php echo $backColor; ?>;"></i>
<h4><?php echo $rawScore; ?></h4>
<span><?php echo $sub->category_name ?></span>
</div> -->
<figure class="highcharts-figure">
<div id="container_1<?php echo $ability_id; ?>" style="height: 370px;"></div>
</figure>
</div>
<script>
// 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
}
},
title: {
text: '<?php echo $sub->category_name ?>'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 50,
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_1<?php echo $ability_id; ?>', options);
</script>
<?php
}
?>
</div>
<!-----Circles 3---->
<div class="intro-box">
<?php
$data = array();
$array = array();
foreach ($getsubject as $sub) {
$subject = $sub->exam_category_id;
$abilityData = $wpdb->get_row("SELECT ability_id,instruction FROM $PSY_ABILITY where ref_id='$subject'");
$ability_id = $abilityData->ability_id;
$ability_desc = $abilityData->instruction;
// echo "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'";
// echo "<br>";
$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 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';
}
$showcategory = 'Current Ability - ' . $stenScore;
$array = array("y" => $stenScore, "name" => $showcategory);
$remainValue = 10 - $stenScore;
$remainText = 'Area of Improvement - ' . $remainValue;
?>
<div class="col-md-4">
<!-- <div class="one-circle-box" style="border: 3px solid <?php echo $backColor; ?>;">
<i class="fa fa-chart-line" style="color: <?php echo $backColor; ?>;"></i>
<h4><?php echo $rawScore; ?></h4>
<span><?php echo $sub->category_name ?></span>
</div> -->
<figure class="highcharts-figure">
<div id="container_2<?php echo $ability_id; ?>" style="height: 370px;"></div>
</figure>
</div>
<script>
// 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
}
},
title: {
text: '<?php echo $sub->category_name ?>'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 50,
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_2<?php echo $ability_id; ?>', options);
</script>
<?php
}
?>
</div>
</div>
<!----highcharts---->
<div class="row">
<div class="intro-box">
<div class="col-md-6">
<div class="chart-box">
<h5>
Click on PIE chart topic to get more details.
<div id="share_pie" class="fb-share">
<svg viewBox="0 0 12 12" preserveAspectRatio="xMidYMid meet">
<path class="svg-icon-path" d="M9.1,0.1V2H8C7.6,2,7.3,2.1,7.1,2.3C7,2.4,6.9,2.7,6.9,3v1.4H9L8.8,6.5H6.9V12H4.7V6.5H2.9V4.4h1.8V2.8 c0-0.9,0.3-1.6,0.7-2.1C6,0.2,6.6,0,7.5,0C8.2,0,8.7,0,9.1,0.1z"></path>
</svg>
<span>Share</span>
</div>
</h5>
<figure class="highcharts-figure">
<div id="container" style="height: 370px;"></div>
</figure>
</div>
</div>
<div class="col-md-6">
<div class="chart-box">
<h5>
Click on Bar chart topic to get more details.
<div id="share_bar" class="fb-share">
<svg viewBox="0 0 12 12" preserveAspectRatio="xMidYMid meet">
<path class="svg-icon-path" d="M9.1,0.1V2H8C7.6,2,7.3,2.1,7.1,2.3C7,2.4,6.9,2.7,6.9,3v1.4H9L8.8,6.5H6.9V12H4.7V6.5H2.9V4.4h1.8V2.8 c0-0.9,0.3-1.6,0.7-2.1C6,0.2,6.6,0,7.5,0C8.2,0,8.7,0,9.1,0.1z"></path>
</svg>
<span>Share</span>
</div>
</h5>
<figure class="highcharts-figure">
<div id="container_bar" style="height: 370px;"></div>
</figure>
</div>
</div>
<div class="col-md-12">
<div class="ability-desc-box" id="abilityDesc">
</div>
</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 ($getInterestDesc as $desc) {
?>
<li> <span class="bold-txt"> <?php echo $desc->field_name ?> </span> – <?php echo $desc->field_desc ?></li>
<?php
}
?>
</ul>
</div>
</div>
</div>
<?php
//} else {
?>
<!-- <div class="row">
<div class="chart-header-box" style="background: #d8e6f1;text-align: center;">
<h6>Thank you for taking the test. Our experts will analyse your answers and will create your customised reports. This will take 48 working hours. Once your reports are ready you will be intimated through email/sms and you will be able to review the same in your profile page.</h6>
<h3 class="back-home-btn"><i class="fas fa-angle-double-left"></i> Back to Home</h3>
</div>
</div> -->
<?php
//}
?>
</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'
}
}
},
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'
},
title: {
text: 'Aptitude Test'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y}'
}
},
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: 'Sten Score',
colorByPoint: true,
data: <?php echo json_encode($data); ?>
}]
}
var chart = Highcharts.chart('container', options);
//bar chart
var options_bar = {
chart: {
type: 'column'
},
title: {
text: 'Aptitude<br>Test',
align: 'center',
y: 60
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Sten Score'
},
max: 10,
min: 0
},
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); ?>
}]
}
var chart_bar = Highcharts.chart('container_bar', options_bar);
//pie chart share button
$("#share_pie").click(function() {
var data = {
options: JSON.stringify(options),
resources: {
// You can add your CSS styles here
css: ".highcharts-background { fill: #efefef; stroke: #a4edba; stroke-width: 2px}"
},
width: 500,
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;
});
});
//bar chart share button
$("#share_bar").click(function() {
var data = {
options: JSON.stringify(options_bar),
resources: {
// You can add your CSS styles here
css: ".highcharts-background { fill: #efefef; stroke: #a4edba; stroke-width: 2px}"
},
width: 500,
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;
});
});
</script>
<?php
} else {
echo "Error : No test id found.";
}
} else {
echo "Error : Invalid Test Id.";
}
} else {
echo "Error : Please login to view report.";
}
?>