Marle
/
webAdministracion


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808
							<?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;">
		
			<!-- TITLE + EXPORT RAW -->
			<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">&mu;</th><!--x&#772-->
					<th scope="col" rowspan="2" class="table-header">&sigma;</th>
					<th scope="col" rowspan="2" class="table-header">%&Delta;<br><small>Moments - Pre</small></th>
					<th scope="col" rowspan="2" class="table-header">%&Delta;<br><small>Post - Moments</small></th>
					<th scope="col" rowspan="2" class="table-header">%&Delta;<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'>&times;</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
			
			// If no moments have been sent yet, remove chart
			if(dataSet === null) {
				document.getElementById('myChart2').remove();
				return;
			}
			
			// 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>