admin/34988-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

data visualization for responses page

Browse Source
This commit is contained in:
Flatlogic Bot 2025-10-15 18:23:13 +00:00
parent cdbc910be9
commit 170f400581
2 changed files with 165 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/pasted-20251015-181829-ed77e158.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

201
view_responses.php
View File

@ -13,7 +13,6 @@ if (!$survey_id) {
try { try {
$pdo = db(); $pdo = db();
// Fetch survey title
$stmt = $pdo->prepare("SELECT title FROM surveys WHERE id = ?"); $stmt = $pdo->prepare("SELECT title FROM surveys WHERE id = ?");
$stmt->execute([$survey_id]); $stmt->execute([$survey_id]);
$survey = $stmt->fetch(PDO::FETCH_ASSOC); $survey = $stmt->fetch(PDO::FETCH_ASSOC);
@ -24,24 +23,58 @@ try {
exit; exit;
} }
// Fetch all responses for this survey $stmt = $pdo->prepare("
$stmt = $pdo->prepare("SELECT * FROM survey_responses WHERE survey_id = ? ORDER BY submitted_at DESC"); SELECT q.id AS question_id, q.question_text, q.question_type, sa.answer_text
FROM survey_answers sa
JOIN questions q ON sa.question_id = q.id
WHERE q.survey_id = ?
");
$stmt->execute([$survey_id]); $stmt->execute([$survey_id]);
$responses = $stmt->fetchAll(PDO::FETCH_ASSOC); $answers = $stmt->fetchAll(PDO::FETCH_ASSOC);
// For each response, fetch the answers $chart_data = [];
$responses_with_answers = []; $text_answers = [];
foreach ($responses as $response) {
$answer_stmt = $pdo->prepare(" foreach ($answers as $answer) {
SELECT sa.answer_text, q.question_text $question_id = $answer['question_id'];
FROM survey_answers sa $question_text = $answer['question_text'];
JOIN questions q ON sa.question_id = q.id $question_type = $answer['question_type'];
WHERE sa.response_id = ? $answer_text = $answer['answer_text'];
");
$answer_stmt->execute([$response['id']]); if ($question_type === 'multiple-choice' || $question_type === 'checkboxes') {
$answers = $answer_stmt->fetchAll(PDO::FETCH_ASSOC); if (!isset($chart_data[$question_id])) {
$response['answers'] = $answers; $chart_data[$question_id] = [
$responses_with_answers[] = $response; 'question_text' => $question_text,
'answers' => [],
];
}
if ($question_type === 'checkboxes') {
$selected_options = explode(',', $answer_text);
foreach ($selected_options as $option) {
$option = trim($option);
if (!empty($option)) {
if (!isset($chart_data[$question_id]['answers'][$option])) {
$chart_data[$question_id]['answers'][$option] = 0;
}
$chart_data[$question_id]['answers'][$option]++;
}
}
} else { // multiple-choice
if (!isset($chart_data[$question_id]['answers'][$answer_text])) {
$chart_data[$question_id]['answers'][$answer_text] = 0;
}
$chart_data[$question_id]['answers'][$answer_text]++;
}
} else {
if (!isset($text_answers[$question_id])) {
$text_answers[$question_id] = [
'question_text' => $question_text,
'answers' => [],
];
}
$text_answers[$question_id]['answers'][] = $answer_text;
}
} }
} catch (PDOException $e) { } catch (PDOException $e) {
@ -57,6 +90,9 @@ try {
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responses for <?php echo htmlspecialchars($survey['title']); ?></title> <title>Responses for <?php echo htmlspecialchars($survey['title']); ?></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/d3.layout.cloud.js"></script>
</head> </head>
<body> <body>
@ -81,34 +117,127 @@ try {
<a href="admin.php" class="btn btn-secondary mb-4">&larr; Back to Dashboard</a> <a href="admin.php" class="btn btn-secondary mb-4">&larr; Back to Dashboard</a>
<?php if (empty($responses_with_answers)): ?> <?php if (empty($chart_data) && empty($text_answers)): ?>
<div class="alert alert-info"> <div class="alert alert-info">
No responses have been submitted for this survey yet. No responses have been submitted for this survey yet.
</div> </div>
<?php else: ?> <?php else: ?>
<?php foreach ($responses_with_answers as $response): ?> <div class="row">
<div class="card mb-4"> <?php foreach ($chart_data as $question_id => $data): ?>
<div class="card-header"> <div class="col-md-6 mb-4">
Response submitted on: <?php echo htmlspecialchars(date("F j, Y, g:i a", strtotime($response['submitted_at']))); ?> <div class="card">
<div class="card-header">
<?php echo htmlspecialchars($data['question_text']); ?>
</div>
<div class="card-body">
<canvas id="chart-<?php echo $question_id; ?>"></canvas>
</div>
</div>
</div> </div>
<div class="card-body"> <?php endforeach; ?>
<ul class="list-group list-group-flush"> </div>
<?php foreach ($response['answers'] as $answer): ?>
<li class="list-group-item"> <?php if (!empty($text_answers)): ?>
<p class="fw-bold mb-1"><?php echo htmlspecialchars($answer['question_text']); ?></p> <hr class="my-5">
<p class="mb-0 text-muted"><?php echo htmlspecialchars($answer['answer_text']); ?></p> <h2>Text Answers</h2>
</li> <?php foreach ($text_answers as $question_id => $data): ?>
<?php endforeach; ?> <div class="card mb-4">
<?php if (empty($response['answers'])): ?> <div class="card-header">
<li class="list-group-item">No answers were provided for this submission.</li> <?php echo htmlspecialchars($data['question_text']); ?>
<?php endif; ?> </div>
</ul> <div class="card-body">
<div id="word-cloud-<?php echo $question_id; ?>"></div>
</div>
</div> </div>
</div> <?php endforeach; ?>
<?php endforeach; ?> <?php endif; ?>
<?php endif; ?> <?php endif; ?>
</div> </div>
<script>
document.addEventListener('DOMContentLoaded', function () {
<?php foreach ($chart_data as $question_id => $data): ?>
new Chart(document.getElementById('chart-<?php echo $question_id; ?>'), {
type: 'bar',
data: {
labels: <?php echo json_encode(array_keys($data['answers'])); ?>,
datasets: [{
label: 'Number of Responses',
data: <?php echo json_encode(array_values($data['answers'])); ?>,
backgroundColor: 'rgba(54, 162, 235, 0.6)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true,
ticks: {
stepSize: 1
}
}
}
}
});
<?php endforeach; ?>
<?php foreach ($text_answers as $question_id => $data): ?>
var text = <?php echo json_encode(implode(" ", $data['answers'])); ?>;
var words = text.split(/\s+/).map(function(word) {
return word.replace(/[^\w\s]/gi, '').toLowerCase();
}).filter(function(word) {
return word.length > 3;
});
var wordCounts = {};
words.forEach(function(word) {
wordCounts[word] = (wordCounts[word] || 0) + 1;
});
var word_data = Object.keys(wordCounts).map(function(key) {
return {text: key, size: wordCounts[key]};
});
var margin = {top: 10, right: 10, bottom: 10, left: 10},
width = 450 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom;
var svg = d3.select("#word-cloud-<?php echo $question_id; ?>").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var layout = d3.layout.cloud()
.size([width, height])
.words(word_data.map(function(d) { return {text: d.text, size:d.size*10}; }))
.padding(5)
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.font("Impact")
.fontSize(function(d) { return d.size; })
.on("end", draw);
layout.start();
function draw(words) {
svg
.append("g")
.attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("font-family", "Impact")
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; });
}
<?php endforeach; ?>
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html> </html>