<?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>