HEX
Server: Apache/2.4.58 (Ubuntu)
System: Linux ip-172-31-18-78 6.17.0-1017-aws #17~24.04.1-Ubuntu SMP Tue May 26 21:09:53 UTC 2026 aarch64
User: ubuntu (1000)
PHP: 8.2.31
Disabled: NONE
Upload Files
File: /var/www/selfanalyse/counselor/selfstr-test-report.php
<?php

/**
 *
 * Title : Test Report
 * Developer : Rohit Kashyap
 * Date : 13 Oct,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_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_TEST_GEN_TEST_TAKEN = $wpdb->prefix . PSY_TEST_GEN_TEST_TAKEN;
$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 test_type='SS' and status='Y'");
    $user_id = $wpdb->get_var("select user_id from $PSY_TEST_GEN_TEST_TAKEN where test_taken_id='$testID'");
    //$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='SS' 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.total_questions,tt.time_taken_in_seconds,tt.start_date,e.category_name,ac.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 ac on ac.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));
        $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 where e.parent_id='54755' order by e.exam_category_id");
        $arrColor = array("a" => "#FF555E", "b" => "#FF8650", "c" => "#FFE981", "d" => "#8BF18B", "e" => "#83B2FF", "f" => "#9B6EF3");
        shuffle($arrColor);
?>
        <!DOCTYPE html>
        <html <?php language_attributes(); ?>>

        <head>
            <title>Self Assessment for Strength and Weakness Test Report - Selfanalyse</title>
            <link rel="stylesheet" href="/self-strength-test/css/bootstrap.min.css">
            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
            <script src="/self-strength-test/js/jquery.min.js"></script>
            <script src="/self-strength-test/js/bootstrap.min.js"></script>
            <script src="/self-strength-test/js/highcharts.js"></script>
            <script src="/self-strength-test/js/highcharts-more.js"></script>
            <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);
            </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 */
                #btnBack {
                    float: left;
                    margin-bottom: 12px;
                    background: #f53e10;
                    border: none;
                    color: #fff;
                    padding: 4px 10px;
                    font-weight: 600;
                    border-radius: 4px;
                }

                #btnPrint {
                    float: right;
                    margin-bottom: 12px;
                    background: #154479;
                    border: none;
                    color: #fff;
                    padding: 4px 10px;
                    font-weight: 600;
                    border-radius: 4px;
                }

                /****snackbar css */
                #snackbar {
                    visibility: hidden;
                    min-width: 250px;
                    margin-left: -125px;
                    background-color: #333;
                    color: #fff;
                    text-align: center;
                    border-radius: 2px;
                    padding: 16px;
                    position: fixed;
                    z-index: 1;
                    left: 50%;
                    bottom: 30px;
                    font-size: 17px;
                }

                #snackbar.show {
                    visibility: visible;
                    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
                    animation: fadein 0.5s, fadeout 0.5s 2.5s;
                }

                @-webkit-keyframes fadein {
                    from {
                        bottom: 0;
                        opacity: 0;
                    }

                    to {
                        bottom: 30px;
                        opacity: 1;
                    }
                }

                @keyframes fadein {
                    from {
                        bottom: 0;
                        opacity: 0;
                    }

                    to {
                        bottom: 30px;
                        opacity: 1;
                    }
                }

                @-webkit-keyframes fadeout {
                    from {
                        bottom: 30px;
                        opacity: 1;
                    }

                    to {
                        bottom: 0;
                        opacity: 0;
                    }
                }

                @keyframes fadeout {
                    from {
                        bottom: 30px;
                        opacity: 1;
                    }

                    to {
                        bottom: 0;
                        opacity: 0;
                    }
                }

                /* 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>
                    <?php
                    //if ($curDate >= $tomorrow) {
                    ?>
                    <!-----Circles---->
                    <div class="row">
                        <div class="intro-box">
                            <div class="col-md-6">
                                <a href="/test" id="btnBack">Back to Profile</a>
                            </div>
                            <div class="col-md-6">
                                <a class="btn btn-info" href="pdf-html/self-sterngth-information.pdf" target="_blank">Self-Assessment Report</a>
                                <button id="btnPrint" onClick="popOut('/self-strength-test/print_page.php?testId=<?php echo $testID; ?>','Test of character virtues report', 1200, 650)">Graph Report</button>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="intro-box">
                            <div class="col-md-12" id="bubble"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="intro-box">
                            <?php
                            $i = 1;
                            $marksArray = array();
                            foreach ($getsubject as $sub) {
                                $subject = $sub->category_name;
                                $sub_id = $sub->exam_category_id;
                                $gettopics = $wpdb->get_results("SELECT e.category_name,e.exam_category_id from $PSY_EXAMS as e where e.parent_id='$sub_id'");
                                $totalSub = sizeof($gettopics);
                                $data = array();
                                $bubbleData = array();
                                $defaultArray = array();
                                $subSum = array();
                                $categories = array();
                                foreach ($gettopics as $t) {
                                    $getMarks = $wpdb->get_row("SELECT count(case when tt.answer=1 then 1 end) as option_5,count(case when tt.answer=2 then 1 end) as option_4,count(case when tt.answer=3 then 1 end) as option_3,count(case when tt.answer=4 then 1 end) as option_2,count(case when tt.answer=5 then 1 end) as option_1,e.category_name FROM $PSY_TEST_GEN_TEST_TAKEN_QUESTION_ANSWER as tt LEFT JOIN $PSY_EXAMS as e on e.exam_category_id=tt.module_id where tt.module_id='$t->exam_category_id' and tt.test_taken_id='$testID'");
                                    $option_5 = $getMarks->option_5 * 5;
                                    $option_4 = $getMarks->option_4 * 4;
                                    $option_3 = $getMarks->option_3 * 3;
                                    $option_2 = $getMarks->option_2 * 2;
                                    $option_1 = $getMarks->option_1 * 1;
                                    $totalSum = ($option_1 + $option_2 + $option_3 + $option_4 + $option_5);
                                    $subSum[] = $totalSum;
                                    $data[] = array("name" => $t->category_name, "y" => $totalSum);
                                    $bubbleData[] = array("name" => $t->category_name, "value" => $totalSum);
                                    $categories[] = array($t->category_name);
                                    $defaultArray[] = array("name" => "Total", "y" => 20);
                                }
                                //pie chart color
                                $color = $wpdb->get_var("SELECT color FROM $PSY_ABILITY where ref_id='$sub_id'");
                                $imagename = substr(strtolower(str_replace(" ", "-", $subject)), 10);
                                $totalMarks = ($totalSub * 20);
                                $subMarks = array_sum($subSum);
                                $percentage = round(($subMarks / $totalMarks) * 100);
                                $showText = $percentage . '%';
                                $key = array_rand($arrColor);
                                $marksArray = array("y" => $percentage, "name" => "Current Level", "color" => $color);
                                $remainValue = 100 - $percentage;
                                $bubbleArray[] = array("name" => $subject, "value" => $percentage, "color" => $arrColor[$key]);
                                //echo json_encode($bubbleArray);
                            ?>
                                <div class="col-md-6" id="compare_<?php echo $i; ?>"></div>
                                <div class="col-md-6" id="percent_<?php echo $i; ?>"></div>
                                <script>
                                    //comparsion chart
                                    var comparison_chart = {
                                        chart: {
                                            type: 'column',
                                        },
                                        title: {
                                            text: '<?php echo $subject; ?>',
                                            style: {
                                                color: '#000000',
                                                fontSize: '20px',
                                                fontWeight: 'bold'
                                            }
                                        },
                                        legend: {
                                            itemStyle: {
                                                color: '#000000',
                                                fontWeight: 'bold',
                                                fontSize: '10px'
                                            }
                                        },
                                        xAxis: {
                                            categories: <?php echo json_encode($categories); ?>,
                                            crosshair: true,
                                            title: {
                                                text: 'Score'
                                            },
                                            labels: {
                                                style: {
                                                    fontSize: '12px',
                                                    fontWeight: 'bold',
                                                }
                                            }
                                        },
                                        yAxis: {
                                            title: {
                                                text: 'Score'
                                            },
                                            labels: {
                                                style: {
                                                    fontWeight: 'bold',
                                                }
                                            },
                                            max: 20,
                                            min: 0,
                                            tickInterval: 5
                                        },
                                        plotOptions: {
                                            series: {
                                                pointPadding: -0.50
                                            },
                                        },
                                        series: [{
                                            name: 'Score',
                                            color: 'rgb(158, 159, 163)',
                                            pointPlacement: 0.2,
                                            linkedTo: 'main',
                                            pointWidth: 50,
                                            data: <?php echo json_encode($defaultArray); ?>,
                                        }, {
                                            name: 'Score',
                                            id: 'main',
                                            showInLegend: false,
                                            pointWidth: 50,
                                            colorByPoint: true,
                                            dataSorting: {
                                                enabled: false,
                                                matchByName: true,
                                                sortKey: 'series.order'
                                            },
                                            dataLabels: [{
                                                enabled: true,
                                                inside: true,
                                                style: {
                                                    fontSize: '16px'
                                                }
                                            }],
                                            data: <?php echo json_encode($data); ?>
                                        }, ],
                                    }
                                    var chart_bar = Highcharts.chart('compare_<?php echo $i; ?>', comparison_chart);
                                </script>
                                <?php
                                $image_name = $testID . '-' . $imagename . '-bar.png';
                                $path = '/var/www/selfanalyse/self-strength-test/chart_images/' . $image_name;
                                if (file_exists($path)) {
                                } else {
                                ?>
                                    <script>
                                        var comparison_chart_image = {
                                            infile: {
                                                "chart": {
                                                    "type": 'column',
                                                },
                                                "title": {
                                                    "text": '<?php echo $subject; ?>',
                                                    "style": {
                                                        "color": '#000000',
                                                        "fontSize": '20px',
                                                        "fontWeight": 'bold'
                                                    }
                                                },
                                                "legend": {
                                                    "itemStyle": {
                                                        "color": '#000000',
                                                        "fontWeight": 'bold',
                                                        "fontSize": '10px'
                                                    }
                                                },
                                                "xAxis": {
                                                    "categories": <?php echo json_encode($categories); ?>,
                                                    "crosshair": true,
                                                    "title": {
                                                        "text": 'Score'
                                                    },
                                                    "labels": {
                                                        "style": {
                                                            "fontSize": '12px',
                                                            "fontWeight": 'bold',
                                                        }
                                                    }
                                                },
                                                "yAxis": {
                                                    "title": {
                                                        "text": 'Score'
                                                    },
                                                    "labels": {
                                                        "style": {
                                                            "fontWeight": 'bold',
                                                        }
                                                    },
                                                    "max": 20,
                                                    "min": 0,
                                                    "tickInterval": 5
                                                },
                                                "plotOptions": {
                                                    "series": {
                                                        "pointPadding": -0.50
                                                    },
                                                },
                                                "series": [{
                                                    "name": 'Score',
                                                    "color": 'rgb(158, 159, 163)',
                                                    "pointPlacement": 0.2,
                                                    "linkedTo": 'main',
                                                    "pointWidth": 50,
                                                    "data": <?php echo json_encode($defaultArray); ?>,
                                                }, {
                                                    "name": 'Score',
                                                    "id": 'main',
                                                    "showInLegend": false,
                                                    "pointWidth": 50,
                                                    "colorByPoint": true,
                                                    "dataSorting": {
                                                        "enabled": false,
                                                        "matchByName": true,
                                                        "sortKey": 'series.order'
                                                    },
                                                    "dataLabels": [{
                                                        "enabled": true,
                                                        "inside": true,
                                                        "style": {
                                                            "fontSize": '16px'
                                                        }
                                                    }],
                                                    "data": <?php echo json_encode($data); ?>
                                                }, ]
                                            },
                                            width: 400,
                                            height: 600,
                                            b64: true

                                        }
                                        var exportUrl = 'https://export.highcharts.com/';
                                        $.ajax({
                                            type: 'POST',
                                            data: JSON.stringify(comparison_chart_image),
                                            url: exportUrl,
                                            headers: {
                                                'Content-Type': 'application/json'
                                            },
                                            success: function(data) {
                                                saveImageforserver(data, '<?php echo $imagename; ?>');
                                            },
                                            error: function(err) {}
                                        });
                                    </script>
                                <?php } ?>
                                <script type="text/javascript">
                                    //percentage chart
                                    //pie chart
                                    var options_pie = {
                                        chart: {
                                            plotBackgroundColor: null,
                                            plotBorderWidth: null,
                                            plotShadow: false,
                                            type: 'pie'
                                        },
                                        title: {
                                            text: '<?php echo $subject; ?>',
                                            style: {
                                                color: '#000000',
                                                fontSize: '20px',
                                                fontWeight: 'bold'
                                            }
                                        },
                                        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
                                            }
                                        },
                                        series: [{
                                            name: 'Score',
                                            colorByPoint: true,
                                            data: [<?php echo json_encode($marksArray); ?>, {
                                                "y": <?php echo $remainValue; ?>,
                                                "name": 'Area of Improvement',
                                                "color": '#9e9fa3'
                                            }]
                                        }]
                                    }
                                    var chart_pie = Highcharts.chart('percent_<?php echo $i; ?>', options_pie);
                                </script>
                                <?php
                                $image_name = $testID . '-' . $imagename . '-circle.png';
                                $path = '/var/www/selfanalyse/self-strength-test/chart_images/' . $image_name;
                                if (file_exists($path)) {
                                } else {
                                ?>
                                    <script type="text/javascript">
                                        //save pie image
                                        var comparison_pie_image = {
                                            infile: {
                                                "chart": {
                                                    "plotBackgroundColor": null,
                                                    "plotBorderWidth": null,
                                                    "plotShadow": false,
                                                    "type": 'pie'
                                                },
                                                "title": {
                                                    "text": '<?php echo $subject; ?>',
                                                    "style": {
                                                        "color": '#000000',
                                                        "fontSize": '20px',
                                                        "fontWeight": 'bold'
                                                    }
                                                },
                                                "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
                                                    }
                                                },
                                                "series": [{
                                                    "name": 'Score',
                                                    "colorByPoint": true,
                                                    "data": [<?php echo json_encode($marksArray); ?>, {
                                                        "y": <?php echo $remainValue; ?>,
                                                        "name": 'Area of Improvement',
                                                        "color": '#9e9fa3'
                                                    }]
                                                }]
                                            },
                                            width: 300,
                                            height: 600,
                                            b64: true

                                        }
                                        //save pie image
                                        var exportUrl = 'https://export.highcharts.com/';
                                        $.ajax({
                                            type: 'POST',
                                            data: JSON.stringify(comparison_pie_image),
                                            url: exportUrl,
                                            headers: {
                                                'Content-Type': 'application/json'
                                            },
                                            success: function(data) {
                                                saveImageforserverPie(data, '<?php echo $imagename; ?>');
                                            },
                                            error: function(err) {}
                                        });
                                    </script>
                            <?php }
                                $i++;
                            } ?>
                        </div>
                    </div>
                    <!----highcharts---->
                    <?php
                    //  }
                    ?>
                </div>
                <div id="snackbar"></div>
            </section>
            <script>
                var bubble_chart = {
                    chart: {
                        type: 'packedbubble',
                        height: '80%'
                    },
                    title: {
                        text: 'Test of Character Virtues'
                    },
                    tooltip: {
                        useHTML: true,
                        pointFormat: '<b>{point.name}:</b> {point.value}%'
                    },
                    legend: {
                        itemMarginTop: 10,
                        itemMarginBottom: 10,
                        borderWidth: 1
                    },
                    plotOptions: {
                        packedbubble: {
                            series: {
                                animation: false
                            },
                            layoutAlgorithm: {
                                gravitationalConstant: 0.05,
                                splitSeries: true,
                                seriesInteraction: true,
                                dragBetweenSeries: false,
                                parentNodeLimit: true,
                            },
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}:</b> {point.value}%',
                                filter: {
                                    property: 'y',
                                    operator: '>=',
                                    value: 20
                                },
                                style: {
                                    color: 'black',
                                    textOutline: 'none',
                                    fontWeight: 'normal',
                                    textShadow: 'none'
                                }
                            }
                        }
                    },
                    series: [{
                        name: 'All Subjects',
                        data: <?php echo json_encode($bubbleArray); ?>
                    }]
                }
                Highcharts.chart('bubble', bubble_chart);
                var reportSt = localStorage.getItem("report");
                if (reportSt == undefined || reportSt == null) {
                    window.onload = function() {
                        var timeleft = 60;
                        jQuery("#btnPrint").html('Processing ');
                        var downloadTimer = setInterval(function() {
                            timeleft -= 1;
                            jQuery("#btnPrint").append('<i class="fa fa-circle" style="font-size: 8px;"></i>&nbsp;');
                            if (timeleft % 4 == 0) {
                                jQuery("#btnPrint").html('Processing ');
                            }
                            localStorage.setItem("report", timeleft);
                            if (timeleft <= 0) {
                                clearInterval(downloadTimer);
                                localStorage.setItem("report", 'OK')
                                snackAlert('Reports are ready');
                                location.reload();
                            }
                        }, 1000);
                    }
                } else {
                    if (reportSt != 'OK') {
                        var timeleft = reportSt;
                        jQuery("#btnPrint").html('Processing ');
                        var downloadTimer = setInterval(function() {
                            timeleft -= 1;
                            jQuery("#btnPrint").append('<i class="fa fa-circle" style="font-size: 8px;"></i>&nbsp;');
                            if (timeleft % 4 == 0) {
                                jQuery("#btnPrint").html('Processing ');
                            }
                            localStorage.setItem("report", timeleft);
                            if (timeleft <= 0) {
                                clearInterval(downloadTimer);
                                localStorage.setItem("report", 'OK')
                                snackAlert('Reports are ready');
                                location.reload();
                            }
                        }, 1000);
                    }
                }

                function popOut(pageURL, pageTitle,
                    popupWinWidth, popupWinHeight) {
                    var checkSt = localStorage.getItem("report");
                    if (checkSt == undefined || checkSt == null) {
                        snackAlert("Loading.....Your reports are in under progress,Please wait for some time");
                    } else if (jQuery.isNumeric(checkSt)) {
                        snackAlert("Loading.....Your reports are in under progress,Please wait for some time");
                    } else if (checkSt == 'OK') {
                        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);
                    }
                }
                //snack alert
                function snackAlert(text) {
                    jQuery("#snackbar").html(text);
                    jQuery("#snackbar").addClass("show");
                    setTimeout(function() {
                        jQuery("#snackbar").removeClass("show");
                    }, 5000);
                }

                function saveImageforserver(data_image, imagename) {

                    $.ajax({
                        type: "POST",
                        url: "/self-strength-test/save_image.php",
                        dataType: 'JSON',
                        data: {
                            "type": "bar",
                            "test_id": <?php echo $testID ?>,
                            "imagename": imagename,
                            "image": data_image
                        },
                        success: function(data) {}
                    });
                }

                function saveImageforserverPie(data_image, imagename) {
                    $.ajax({
                        type: "POST",
                        url: "/self-strength-test/save_image.php",
                        dataType: 'JSON',
                        data: {
                            "type": "circle",
                            "test_id": <?php echo $testID ?>,
                            "imagename": imagename,
                            "image": data_image
                        },
                        success: function(data) {}
                    });
                }
            </script>
            <!-- END TOP TABLE SECTION -->
        </body>
<?php
    } else {
        echo "Error : No test id found.";
    }
} else {
    echo "Error : Invalid Test Id.";
}
?>