123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802 |
- <?php
-
- require_once 'processes/config.php';
- require_once 'processes/dbh.inc.php';
- require_once 'processes/checkLogin.php';
- include_once 'header.php';
- include("funciones.php");
-
-
-
- //SELECT a.id_question, q.premise, a.id_subquestionnair , q.id_category,q.id_subcategory FROM `answer` a, question q WHERE a.`id_student` = 1860 and a.id_question=q.id ORDER BY `a`.`id_question` ASC
- $experienceID = mysqli_real_escape_string($connection, trim($_GET['exp']));
- //$id_student = 1860;
-
- ///////Busca cantidad de sub cuestionarios - Empieza////////////////
- $sqlSelect = sprintf("SELECT * FROM experience_questionnair AS EQ JOIN subquestionnair AS SQ WHERE EQ.id_questionnair = SQ.id_questionnair AND EQ.id_experience = %s ORDER BY SQ.date_to_administer ASC",
- GetSQLValueString($experienceID, "int")
- );
-
- $dbresultSel = mysqli_query($connection, $sqlSelect);
-
- $moments = [];
- while($row = mysqli_fetch_array($dbresultSel)) {
- $moments[] = $row; // warning: includes first (pre) and last (post)
- }
-
- // print("<pre>");
- // var_dump($moments);
- // exit();
-
- //print(count($moments));
- ///////Termina - Busca cantidad de sub cuestionarios - ////////////////
-
- ///////Busca Preguntas - Empieza////////////////
- $sqlSelect = sprintf("SELECT DISTINCT Q.* FROM `experience_questionnair` AS EQ JOIN questionnair_question AS QQ JOIN question AS Q WHERE EQ.id_questionnair = QQ.`id_questionnair` AND QQ.id_question = Q.id AND EQ.id_experience = %s ORDER BY Q.id",
- GetSQLValueString($experienceID, "int")
- );
- $dbresultSel = mysqli_query($connection, $sqlSelect);
- $resultados = array();
- $j = 1;
- while($row = mysqli_fetch_array($dbresultSel)) {
- //$preguntas[] = array($i, $row['premise']);
- $emas = array();
- $emas[] = $j;
- $emas[] = $row['premise'];
- $emas[] = " "; // PRE test
-
- // SUBQUESTIONNAIRES
- for($i = 1; $i <= count($moments) - 2; $i++) {
- $emas[] = " ";
- }
-
- $emas[] = " "; // POST test
- $emas[] = " "; // Average
- $emas[] = " "; // Standard Deviation
- $emas[] = " "; // Percent Change between EMA and PRE
- $emas[] = " "; // Percent Change between POST and EMA
- $emas[] = " "; // Percent Change between POST and PRE
-
- $resultados[] = $emas;
- $j++;
- }
- ///////Termina - Busca Preguntas - ////////////////
-
- ///////Busca Estudiantes - Empieza////////////////
- $sqlSelectEst = sprintf("SELECT s.id id_stu FROM student s, student_participate_experience se WHERE s.id=se.id_student and se.id_experience = %s order by id_stu",
- GetSQLValueString($experienceID, "int")
- );
- $dbresultEst = mysqli_query($connection,$sqlSelectEst);
- ///////Termina - Busca Estudiantes - ////////////////
-
-
- $queryExperience = "SELECT * FROM experience WHERE id = '$experienceID'";
- $resultExperience = mysqli_query($connection, $queryExperience);
- $experience = mysqli_fetch_assoc($resultExperience);
-
- ?>
-
- <style>
- .table-header {
- width: 30px;
- vertical-align: middle;
- text-align: center;
- }
-
- .table-header.clickable {
- cursor: pointer;
- }
- </style>
-
- <!--START OF respuestas.php-->
- <body>
-
- <header id="main-header">
- <a id="logo" href=".">
- TANIA
- <img src="./img/pen_800x800.png" alt="tania logo pen" width="25" height="25">
- </a>
- <div id="account">
- <a class="nav-link" style="margin-right: 1rem;" href="<?= $_SERVER['HTTP_REFERER'] ?>"><i class="fas fa-arrow-left"></i> Back</a>
- <a class="sign-out" href="./processes/logout.php">Sign Out</a>
- </div>
- </header>
-
- <?php if($experienceID === 1): ?>
- <div class="container" style="margin-top: 8rem;">
- <div class="row">
- <div class="col">
- <h4>Warning: Este script no funciona para esta experiencia en particular (la parte de escoger los resultados por cada estudiante).</h4>
- </div>
- </div>
- </div>
- <?php endif; ?>
-
- <div class="container" style="margin-top: 8rem;">
-
- <!-- CHART -->
- <div class="row">
- <div class="col-sm-10">
- <h2>
- Results – <span class="text-muted"><?php echo $experience['title'] ?></span>
- <button type="button" class="btn btn-link btn-lg" data-toggle="popover" title="Table Tips" data-content="Toggle between one student or all students. Also, you can view results with respect to categories and subcategories. Click on each moment to get a breakdown of their details." data-placement="bottom">
- <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
- </button>
- </h2>
- </div>
- <div class="col-sm-2">
- <br>
- <form id="exportForm" method="POST" action="processes/export.php">
- <input type="hidden" name="studentID" value="all">
- <input type="hidden" name="id_exp" value="<?php echo $experienceID; ?>">
- <input type="hidden" name="res_type" value="0">
- <button type="submit" name="export" class="btn btn-primary">Export Raw</button>
- </form>
- </div>
- </div>
-
- <!-- CHART 2 -->
- <div class="row">
- <div class="col-md-12">
- <canvas onclick="alert('holis brodel')" id="myChart2" style="margin: 2rem auto;">
- <p>Your browser does not support the canvas element.</p>
- </canvas>
- </div>
- </div>
-
- <div class="row">
- <div class="col">
-
-
-
-
- <div class="table-responsive">
-
- <table class="table table-bordered">
- <thead>
- <tr>
- <th scope="col" style="vertical-align: middle; text-align: center;" rowspan="2" style="width:30px">#</th>
- <th scope="col">
-
- <form>
- <select class="form-control" id="studentID" style="text-align-last: center;">
- <option disabled selected>Select Student</option>
- <option selected value="all">All Students</option>
- <?php while($rowEst = mysqli_fetch_array($dbresultEst)): ?>
- <option value='<?php echo $rowEst['id_stu']; ?>'><?php echo $rowEst['id_stu']; ?></option>
- <?php endwhile; ?>
- </select>
- <input type="hidden" value="<?php echo $experienceID;?>" id="experienceID">
- </form>
-
- </th>
- <th
- scope="col"
- rowspan="2"
- class="table-header clickable"
- data-momentid="<?= $moments[0]['id'] ?>"
- onclick="$('#breakdownModal').modal('show')"
- data-momentnumber="PRE"
- >
- Pre
- </th>
- <th colspan="<?php echo count($moments) - 2; ?>" style="vertical-align: middle; text-align: center;">Moments</th>
- <th
- scope="col"
- rowspan="2"
- class="table-header clickable"
- data-momentid="<?= $moments[count($moments) - 1]['id'] ?>"
- onclick="$('#breakdownModal').modal('show')"
- data-momentnumber="POST"
- >
- Post
- </th>
- <th scope="col" rowspan="2" class="table-header">μ</th><!--x̄-->
- <th scope="col" rowspan="2" class="table-header">σ</th>
- <th scope="col" rowspan="2" class="table-header">%Δ<br><small>Moments - Pre</small></th>
- <th scope="col" rowspan="2" class="table-header">%Δ<br><small>Post - Moments</small></th>
- <th scope="col" rowspan="2" class="table-header">%Δ<br><small>Post - Pre</small></th>
- </tr>
- <tr>
- <th>
-
- <form>
- <select class="form-control" id="tipo_resumen" style="text-align-last: center;">
- <option value="0" selected>Questions</option>
- <option value="1">Subcategories</option>
- <option value="2">Categories</option>
- </select>
- <input type="hidden" value="<?php echo $experienceID;?>" id="experienceID">
- </form>
-
- </th>
- <?php for($i = 1; $i <= count($moments) - 2; $i++): ?>
- <th
- class="table-header clickable"
- scope="col"
- data-momentid="<?= $moments[$i]['id'] ?>"
- onclick="$('#breakdownModal').modal('show')"
- data-momentnumber="<?= '#' . $i ?>"
- >
- <?php echo $i; ?>
- </th>
- <?php endfor; ?>
- </tr>
- </thead>
- <tbody id="loqueseve">
- <?php foreach($resultados as $pregunta): ?>
- <tr>
- <?php foreach($pregunta as $item): ?>
- <td style="vertical-align: middle; text-align: center;"><?php echo $item ?></td>
- <?php endforeach; ?>
- </tr>
- <?php endforeach; ?>
- </tbody>
- </table>
-
-
- </div><!--table-responsive-->
-
-
- </div><!--col-->
- </div><!--row-->
-
- </div><!--container-->
-
-
- <!-- CATEGORY CHART MODAL -->
- <div class='modal' id='breakdownModal' tabindex='-1' role='dialog' aria-labelledby='breakdownModalLabel' aria-hidden='true'>
- <div class='modal-dialog modal-lg' role='document'>
- <div class='modal-content'>
-
- <div class='modal-header'>
- <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
- <span aria-hidden='true'>×</span>
- </button>
- <h3 class='modal-title' id='breakdownModalLabel'>Breakdown by <span id="breakdown-type">Category</span> <small id="moment-number">(Moment #)</small></h3>
- </div>
-
- <div class='modal-body'>
-
- <div class="row">
- <div class="col-md-12">
- <canvas id="categoryChart">
- <p>Your browser does not support the canvas element.</p>
- </canvas>
- <canvas id="subcategoryChart">
- <p>Your browser does not support the canvas element.</p>
- </canvas>
- <canvas id="questionChart">
- <p>Your browser does not support the canvas element.</p>
- </canvas>
- </div>
- </div>
-
- </div><!--modal-body-->
-
- <div class='modal-footer'>
- <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
- </div>
-
- </div><!--modal-content-->
- </div><!--modal-dialog-->
- </div><!--modal-->
-
-
-
- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
- <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script> -->
-
-
-
- <script>
-
- // Enable popovers
- $(function () {
- $('[data-toggle="popover"]').popover();
- });
-
-
- // Global Map of charts
- let myCharts = {};
-
-
- function fetchData(elementID = '#studentID') {
-
- // Define a map from elementID to element index
- let idToIndex = {
- '#studentID': 0,
- '#tipo_resumen': 2
- };
-
- // Fetch corresponding element index
- let index = idToIndex[elementID];
-
- // Manually change the studentID and respuestaType for the export form
- let inputs = document.querySelector('#exportForm').children;
- inputs[index].value = $(elementID).val();
-
- // Fetch data from database
- $.post('respuestasData.php',
- {
- id_student: $('#studentID').val(),
- id_exp: $('#experienceID').val(),
- res_type: $('#tipo_resumen').val()
- },
- function(data, status) {
- $('#loqueseve').html(data);
- }
- );
-
- }
-
- function fetchAnswerRate() {
-
- let experienceID = $("#experienceID").val()
-
- $.post("special5.php",
- {
- experienceID: experienceID
- },
- function(data, status) {
-
- console.log(data);
-
- // Fetch Data
- let payload = JSON.parse(data);
- let dataSet = payload.data; // array of {count, momentID, date} objects
- let maxScore = payload.maxScore // the maximum 'count' value from the data array
-
- // Initialize Data Containers
- let dataPoints = []; // [10, 20, 50, 70, 30];
- let dataLabels = []; // ['1', '2', '3', '4', '5'];
-
- // Create momentID -> momentNumber map for styling purposes
- let momentIDToNumber = {};
- let number = 1; // start at 1
-
- // Fill Data Containers
- dataSet.forEach(function(point) {
-
- // If given ID not in map, create it and increment number by 1
- if(momentIDToNumber[point.momentID] === undefined) {
- momentIDToNumber[point.momentID] = number;
- number++;
- }
-
- dataPoints.push(point.count);
- dataLabels.push(`${point.momentTitle} (${point.date})`);
-
- });
-
- // Render Chart
- renderStaticChart(dataPoints, dataLabels, maxScore);
-
- }
- );
-
- }
-
-
- function fetchBreakdownData(momentID, momentNumber, breakdownType) {
-
-
- // Fetch Necessary Data
- let experienceID = $('#experienceID').val();
- let studentID = $('#studentID').val();
-
-
-
- // Set Metadata Maps (breakdownType -> metadata)
- let breakdownChart = {
- '0': 'questionChart',
- '1': 'subcategoryChart',
- '2': 'categoryChart'
- };
-
- let breakdownText = {
- '0': 'Questions',
- '1': 'Subcategories',
- '2': 'Categories'
- };
-
- let breakdownScripts = {
- '0': 'questionBreakdown.php',
- '1': 'subcategoryBreakdown.php',
- '2': 'categoryBreakdown.php'
- };
-
-
-
- // Change Breakdown Type Text
- $('#breakdownModal #breakdown-type').text(breakdownText[breakdownType]);
-
-
-
- // Change Moment Number
- let metaText = momentNumber.includes('#') ? `(Moment ${momentNumber}` : `(${momentNumber} TEST`;
- if(studentID !== 'all') {
- metaText += ` of student ${studentID}`; // if a specific student is selected, say so
- }
- metaText += ')';
- $('#breakdownModal #moment-number').text(metaText);
-
-
-
- // Set Loading State on modal
- $('#breakdownModal canvas').hide();
- let loader = $('<div class="text-center" style="margin: 5rem 0"><h3>Loading Chart...</h3><span class="loader loader-lg"></span></div>').insertAfter('#breakdownModal canvas:last-child');
-
-
-
- // Make Request & Update Selected Chart
- $.post(breakdownScripts[breakdownType],
- {
- experienceID: experienceID,
- momentID: momentID,
- studentID: studentID
- },
- function(data, status) {
-
- console.log(data);
-
- // Fetch Data
- let payload = data; //JSON.parse(data); // aparently already an object
- let datasets = payload.datasets; // array of objects (datasets)
- let dataLabels = payload.dataLabels; // array of labels ["ResearchSelfEfficacy", "SourcesSelfEfficacy"]
-
- // Render Chart
- updateBreakdownChart(datasets, dataLabels, breakdownChart[breakdownType]);
-
- // Stop Loading State and Show Chart
- $(loader).remove();
- $('#' + breakdownChart[breakdownType]).show();
-
-
- }
- );
-
- }
-
-
-
-
- window.addEventListener('load', function() {
-
- // 1. Fetch Data for when changing select menus
- fetchData(); // can be "#tipo_resumen" too
-
- // 2. Set Event Listeners for menu change
- $("#studentID").change(function() {
- fetchData("#studentID");
- });
- $("#tipo_resumen").change(function() {
- fetchData("#tipo_resumen");
- });
-
- // 3. Set Event Listeners for table clicks
- $("th.table-header.clickable").on("click", function() {
- let momentID = $(this).data("momentid");
- let momentNumber = $(this).data("momentnumber");
- let breakdownType = $("#tipo_resumen").val(); // 0 for questions, 1 for subcategories, 2 for categories
- fetchBreakdownData(momentID, momentNumber, breakdownType);
- });
-
- // 4. Fetch and Render Answer Rate Chart
- fetchAnswerRate();
-
- // 5. Create Breakdown Charts
- ['categoryChart', 'subcategoryChart', 'questionChart'].forEach(function(chartName) {
- createBreakdownChart(chartName);
- });
-
- });
-
-
-
- function createBreakdownChart(chartName) {
-
-
- // Set Metadata Maps
- let auxiliaries = {
- 'categoryChart': {
- titleText: 'Distribution of Answers per Category',
- xLabel: 'Category',
- yLabel: 'Amount of people'
- },
- 'subcategoryChart': {
- titleText: 'Distribution of Answers per Subcategory',
- xLabel: 'Subcategory',
- yLabel: 'Amount of people'
- },
- 'questionChart': {
- titleText: 'Distribution of Answers per Question (not done yet)',
- xLabel: 'Question',
- yLabel: 'Amount of people'
- },
-
- };
-
-
-
- // Initialize Data
- let data = {
- labels: [],
- datasets: []
- };
-
-
- // Initialize Options
- let options = {
- title: {
- display: true,
- text: auxiliaries[chartName].titleText
- },
- legend: false,
- tooltips: {
- position: 'average',
- mode: 'index',
- intersect: false
- },
- scales: {
- xAxes: [{
- stacked: true, // for vertical bars
- display: true,
- scaleLabel: {
- display: true,
- labelString: auxiliaries[chartName].xLabel
- }
- }],
- yAxes: [{
- stacked: false, // for vertical bars
- display: true,
- scaleLabel: {
- display: true,
- labelString: auxiliaries[chartName].yLabel
- },
- ticks: {
- suggestedMin: 0
- }
- }]
- },
- layout: {
- padding: 30
- }
- };
-
-
- // Set Chart Configuration
- let config = {
- type: 'bar',
- data: data,
- options: options
- };
-
-
- // Create Chart
- let chart = new Chart(chartName, config);
-
-
- // Store Chart Reference in global dict
- myCharts[chartName] = chart;
-
- }
-
-
- function updateBreakdownChart(datasets, dataLabels, chartName) {
-
- // Store chart
- let chart = myCharts[chartName];
-
- // Remove all labels
- while(chart.data.labels.pop());
-
- // Insert new labels
- dataLabels.forEach(function(label) {
- chart.data.labels.push(label);
- });
-
- // Remove all datasets
- while(chart.data.datasets.pop());
-
- // Insert new datasets (with their respective data points)
- datasets.forEach(function(dataset) {
- chart.data.datasets.push(dataset);
- });
-
- // Update chart
- chart.update();
- console.log(chart.config);
-
- }
-
-
-
- function renderStaticChart(dataPoints, dataLabels, maxScore, elementID) {
-
-
- // Map from elementID to corresponding chart metadata
- let auxiliaries = {
- 'myChart2': {
- label: ' # of people who answered',
- backgroundColor: '#A4262C',
- borderColor: '#A4262C',
- titleText: 'Answer Rate',
- xAxisLabel: 'Moment Date & Number',
- yAxisLabel: 'Answers'
- }
- };
-
- // Initialize Data
- let data = {
- labels: dataLabels,
- datasets: [{
- label: auxiliaries['myChart2'].label,
- data: dataPoints,
- backgroundColor: auxiliaries['myChart2'].backgroundColor,
- borderColor: auxiliaries['myChart2'].borderColor,
- fill: false
- }]
- };
-
- // Initialize Options
- let options = {
- title: {
- display: true,
- text: auxiliaries['myChart2'].titleText
- },
- legend: false,
- tooltips: {
- position: 'average',
- mode: 'index',
- intersect: false
- },
- scales: {
- xAxes: [{
- stacked: true, // for vertical bars
- display: true,
- scaleLabel: {
- display: true,
- labelString: auxiliaries['myChart2'].xAxisLabel
- }
- }],
- yAxes: [{
- stacked: false, // for vertical bars
- display: true,
- scaleLabel: {
- display: true,
- labelString: auxiliaries['myChart2'].yAxisLabel
- },
- ticks: {
- suggestedMin: 0, // substitute with data.min or something
- suggestedMax: maxScore // substitute with data.max or something
- }
- }]
- }
- };
-
- // Set Chart Configuration
- let config = {
- type: 'bar',
- data: data,
- options: options
- };
-
- let myBarChart = new Chart('myChart2', config);
-
- }
-
-
- // Globals for chart timeline
- let pointCount = 1;
-
- function renderMovingChart(dataPoints, dataLabels, maxScore) {
-
- // Initialize Data
- let data = {
- labels: [], // initially empty, because it will be filled slowly for the timeline
- datasets: [{
- label: 'Moments answered per day and moment',
- data: [], // initially empty, because it will be filled slowly for the timeline
- backgroundColor: 'red',
- borderColor: 'red',
- // borderWidth: 1,
- fill: false
- }]
- };
-
- // Initialize Options
- let options = {
- legend: false,
- tooltips: {
- position: 'average',
- mode: 'index',
- intersect: false
- },
- scales: {
- xAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Moment Date (#ID)'
- }
- }],
- yAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Moments Answered'
- },
- ticks: {
- suggestedMin: 0, // substitute with data.min or something
- suggestedMax: maxScore // substitute with data.max or something
- }
- }]
- }
- };
-
- // Set Chart Configuration
- let config = {
- type: 'line',
- data: data,
- options: options
- }
-
- // config2
- let config2 = {
- type: 'bar',
- data: data,
- options: options
- };
-
- // Render Chart
- // let myLineChart = new Chart('myChart', config);
- let myBarChart = new Chart('myChart2', config2);
-
-
- // Set Timeline
- setInterval(function() {
-
- // Modularly increment 'index'/'counter'
- pointCount = pointCount % dataPoints.length + 1;
-
- if(pointCount !== 1) {
-
- // Create the label for that ith point
- config.data.labels.push(dataLabels[pointCount - 1]);
-
- // Overwrite existing
- config.data.datasets.forEach(function(dataset) {
- dataset.data.push(dataPoints[pointCount - 1]);
- });
-
- } else {
-
- // Remove all labels except the first
- config.data.labels.splice(0, dataPoints.length);
-
- // Remove all data points except the first (for each dataset)
- config.data.datasets.forEach(function(dataset) {
- for(let k = 0; k < dataPoints.length; k++) {
- dataset.data.pop();
- }
- });
-
- }
-
- // Render chart
- // myLineChart.update();
- myBarChart.update();
-
-
- }, 1500);
-
- }
-
-
-
- </script>
-
-
- </body>
- </html>
|