Added tabs to view responses and statistics seperately for individual responses.
This commit is contained in:
yash
parent
d78e27a180
commit
461055485c
|
|
@ -1,77 +1,3 @@
|
|||
{{-- <!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Response Detail</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
|
||||
<body style="background-color: #f0ebf8" class="font-roboto">
|
||||
<header class="bg-white shadow-md py-4">
|
||||
<div class="container mx-auto flex justify-between items-center">
|
||||
<div class="flex items-center">
|
||||
<a href="/forms">
|
||||
<img src="{{ asset('images/google-form.png') }}" class="h-12 w-12 mr-4" alt="Google Form Icon" />
|
||||
</a>
|
||||
<h1 style="color: rgb(103,58,183)" class="text-xl font-semibold">{{ $form->title }} - Response Detail</h1>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container mx-auto mt-8">
|
||||
<div class="bg-white p-8 shadow-lg rounded-lg">
|
||||
<h2 class="text-2xl font-bold mb-6">Response from {{ $responses->first()->user->name ?? 'Anonymous' }} - {{ $responses->first()->submitted_at }}</h2>
|
||||
|
||||
@foreach ($responses as $response)
|
||||
@php
|
||||
$question = $questions[$response->question_id] ?? null;
|
||||
$decodedAnswers = json_decode($response->answers, true);
|
||||
@endphp
|
||||
|
||||
@if ($question)
|
||||
<div class="mb-8">
|
||||
<h3 class="text-lg font-medium mb-2">{{ $question->question_text }}</h3>
|
||||
@if ($question->type == 'dropdown')
|
||||
<select disabled class="w-full p-3 border border-gray-600 rounded-lg">
|
||||
@foreach (json_decode($question->options) as $option)
|
||||
<option {{ ($option == $decodedAnswers) ? 'selected' : '' }}>
|
||||
{{ $option }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@elseif (in_array($question->type, ['multiple_choice', 'checkbox']))
|
||||
<div class="space-y-2">
|
||||
@foreach (json_decode($question->options) as $option)
|
||||
<label class="block">
|
||||
<input type="{{ $question->type == 'checkbox' ? 'checkbox' : 'radio' }}" disabled {{ in_array($option, (array)$decodedAnswers) ? 'checked' : '' }} class="mr-2">
|
||||
{{ $option }}
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<p class="mt-2 p-3 bg-gray-100 rounded-lg">{{ is_array($decodedAnswers) ? implode(', ', $decodedAnswers) : $decodedAnswers }}</p>
|
||||
@endif
|
||||
</div>
|
||||
@else
|
||||
<p class="text-red-500">Question not found for ID: {{ $response->question_id }}</p>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="{{ asset('js/script.js') }}"></script>
|
||||
</body>
|
||||
|
||||
</html> --}}
|
||||
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
|
|
@ -84,67 +10,167 @@
|
|||
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
{{-- <script src="https://cdn.tailwindcss.com"></script> --}}
|
||||
<style>
|
||||
.box {
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-list::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 2px;
|
||||
width: 50%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background-color: #aaa;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
transition: 0.3s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tab-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-toggle:nth-child(1):checked ~ .tab-list .tab-item:nth-child(1),
|
||||
.tab-toggle:nth-child(2):checked ~ .tab-list .tab-item:nth-child(2){
|
||||
opacity: 5;
|
||||
color: #731273;
|
||||
}
|
||||
|
||||
.tab-toggle:nth-child(2):checked ~ .tab-list::before {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.tab-toggle:nth-child(1):checked ~ .tab-container .tab-content:nth-child(1),
|
||||
.tab-toggle:nth-child(2):checked ~ .tab-container .tab-content:nth-child(2) {
|
||||
display: block;
|
||||
}
|
||||
.tab-trigger {
|
||||
display: block;
|
||||
padding: 0;
|
||||
color: #731273;
|
||||
}
|
||||
|
||||
.tab-trigger:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
padding: 15px 30px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body style="background-color: #f0ebf8" class="font-open-sans">
|
||||
<body class="font-open-sans">
|
||||
<header class="bg-white shadow-md py-1">
|
||||
<div class="container mx-auto flex justify-between items-center">
|
||||
<div class="flex items-center">
|
||||
<a href="/forms">
|
||||
<img src="{{ asset('images/google-form.png') }}" alt="Google Form Icon" class="h-12 w-12 mr-4" />
|
||||
</a>
|
||||
<h1 style="color: rgb(103,58,183)" class="text-xl font-semibold">{{ $form->title }} - Response Detail</h1>
|
||||
<div class="container d-flex justify-content-start align-items-center">
|
||||
<a href="/forms" class="d-flex align-items-center">
|
||||
<img src="{{ asset('images/google-form.png') }}" alt="Google Form Icon" height="40px" width="40px" />
|
||||
</a>
|
||||
<h2 style="color: rgb(103,58,183)" class="ml-3">{{ $form->title }} - Response Detail</h2>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="box">
|
||||
<input type="radio" class="tab-toggle" name="tab-toggle" id="tab1" checked />
|
||||
<input type="radio" class="tab-toggle" name="tab-toggle" id="tab2" />
|
||||
|
||||
<ul class="tab-list">
|
||||
<li class="tab-item">
|
||||
<label class="tab-trigger" for="tab1"><b>Responses</b></label>
|
||||
</li>
|
||||
<li class="tab-item">
|
||||
<label class="tab-trigger" for="tab2"><b>Statistics</b></label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="question_form bg-light p-4 rounded shadow-sm">
|
||||
<div class="section">
|
||||
<div class="question_title_section mb-4">
|
||||
<div class="question_form_top">
|
||||
<input type="text" id="form-title" name="title" class="form-control form-control-lg mb-2" style="color: black" placeholder="Untitled Form" value="{{ $form->title }}" readonly />
|
||||
<input type="text" name="description" id="form-description" class="form-control form-control-sm" style="color: black" value="{{$form->description}}" readonly/>
|
||||
|
||||
<div mt-4">
|
||||
<!-- Responses Section -->
|
||||
<div class="question_form bg-light p-4 rounded shadow-sm" id="responses_section">
|
||||
<div class="section">
|
||||
<div class="question_title_section mb-4">
|
||||
<div class="question_form_top">
|
||||
<input type="text" id="form-title" name="title" class="form-control form-control-lg mb-2" style="color: black" placeholder="Untitled Form" value="{{ $form->title }}" readonly />
|
||||
<input type="text" name="description" id="form-description" class="form-control form-control-sm" style="color: black" value="{{$form->description}}" readonly/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section" id="questions_section">
|
||||
|
||||
@foreach ($responses as $response)
|
||||
@php
|
||||
$question = $questions[$response->question_id] ?? null;
|
||||
$decodedAnswers = json_decode($response->answers, true);
|
||||
@endphp
|
||||
|
||||
@if ($question)
|
||||
<div class="question mb-4 p-3 border rounded bg-white">
|
||||
<h3 class="text-lg font-medium mb-2">{{ $question->question_text }}</h3>
|
||||
@if ($question->type == 'dropdown')
|
||||
<select disabled class="form-control">
|
||||
@foreach (json_decode($question->options) as $option)
|
||||
<option {{ ($option == $decodedAnswers) ? 'selected' : '' }}>
|
||||
{{ $option }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@elseif (in_array($question->type, ['multiple_choice', 'checkbox']))
|
||||
<div class="options-container mb-3">
|
||||
@foreach (json_decode($question->options) as $option)
|
||||
<div class="option d-flex align-items-center mb-2">
|
||||
<input type="{{ $question->type == 'checkbox' ? 'checkbox' : 'radio' }}" disabled {{ in_array($option, (array)$decodedAnswers) ? 'checked' : '' }} class="mr-2">
|
||||
{{ $option }}
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<p class="mt-2 p-3 bg-light rounded">{{ is_array($decodedAnswers) ? implode(', ', $decodedAnswers) : $decodedAnswers }}</p>
|
||||
@endif
|
||||
</div>
|
||||
@else
|
||||
<p class="text-danger">Question not found for ID: {{ $response->question_id }}</p>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="section" id="questions_section">
|
||||
<h2 class="text-2xl font-bold mb-6">Response from {{ $responses->first()->user->name ?? 'Anonymous' }} - {{ $responses->first()->submitted_at }}</h2>
|
||||
|
||||
@foreach ($responses as $response)
|
||||
@php
|
||||
$question = $questions[$response->question_id] ?? null;
|
||||
$decodedAnswers = json_decode($response->answers, true);
|
||||
@endphp
|
||||
|
||||
@if ($question)
|
||||
<div class="question mb-4 p-3 border rounded bg-white">
|
||||
<h3 class="text-lg font-medium mb-2">{{ $question->question_text }}</h3>
|
||||
@if ($question->type == 'dropdown')
|
||||
<select disabled class="form-control">
|
||||
@foreach (json_decode($question->options) as $option)
|
||||
<option {{ ($option == $decodedAnswers) ? 'selected' : '' }}>
|
||||
{{ $option }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@elseif (in_array($question->type, ['multiple_choice', 'checkbox']))
|
||||
<div class="options-container mb-3">
|
||||
@foreach (json_decode($question->options) as $option)
|
||||
<div class="option d-flex align-items-center mb-2">
|
||||
<input type="{{ $question->type == 'checkbox' ? 'checkbox' : 'radio' }}" disabled {{ in_array($option, (array)$decodedAnswers) ? 'checked' : '' }} class="mr-2">
|
||||
{{ $option }}
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<p class="mt-2 p-3 bg-light rounded">{{ is_array($decodedAnswers) ? implode(', ', $decodedAnswers) : $decodedAnswers }}</p>
|
||||
@endif
|
||||
</div>
|
||||
@else
|
||||
<p class="text-danger">Question not found for ID: {{ $response->question_id }}</p>
|
||||
@endif
|
||||
@endforeach
|
||||
<!-- Statistics Section -->
|
||||
<div style="max-width: 800px" class="container statistics bg-light p-4 rounded shadow-sm" id="statistics_section" style="display: none;">
|
||||
<h3>Statistics</h3>
|
||||
<!-- Pie Chart -->
|
||||
<div style="max-width: 300px" class="mb-6 container">
|
||||
<canvas id="pieChart"></canvas>
|
||||
</div>
|
||||
<!-- Bar Graph -->
|
||||
<div style="max-width: 300px" class="container">
|
||||
<canvas id="barGraph"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -154,7 +180,79 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const tab1 = document.getElementById('tab1');
|
||||
const tab2 = document.getElementById('tab2');
|
||||
const responsesSection = document.getElementById('responses_section');
|
||||
const statisticsSection = document.getElementById('statistics_section');
|
||||
|
||||
tab1.addEventListener('change', function() {
|
||||
if (tab1.checked) {
|
||||
responsesSection.style.display = 'block';
|
||||
statisticsSection.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
tab2.addEventListener('change', function() {
|
||||
if (tab2.checked) {
|
||||
responsesSection.style.display = 'none';
|
||||
statisticsSection.style.display = 'block';
|
||||
renderCharts(); // Render charts when switching to statistics tab
|
||||
}
|
||||
});
|
||||
|
||||
// Set the initial state
|
||||
if (tab1.checked) {
|
||||
responsesSection.style.display = 'block';
|
||||
statisticsSection.style.display = 'none';
|
||||
} else if (tab2.checked) {
|
||||
responsesSection.style.display = 'none';
|
||||
statisticsSection.style.display = 'block';
|
||||
renderCharts(); // Render charts when switching to statistics tab
|
||||
}
|
||||
});
|
||||
|
||||
function renderCharts() {
|
||||
// Example data
|
||||
const pieData = {
|
||||
labels: ['Option 1', 'Option 2', 'Option 3'],
|
||||
datasets: [{
|
||||
label: 'Responses',
|
||||
data: [10, 20, 30],
|
||||
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
|
||||
}]
|
||||
};
|
||||
|
||||
const barData = {
|
||||
labels: ['Question 1', 'Question 2', 'Question 3'],
|
||||
datasets: [{
|
||||
label: 'Number of Responses',
|
||||
data: [15, 25, 10],
|
||||
backgroundColor: '#36A2EB',
|
||||
}]
|
||||
};
|
||||
|
||||
// Pie Chart
|
||||
const pieCtx = document.getElementById('pieChart').getContext('2d');
|
||||
new Chart(pieCtx, {
|
||||
type: 'pie',
|
||||
data: pieData,
|
||||
});
|
||||
|
||||
// Bar Graph
|
||||
const barCtx = document.getElementById('barGraph').getContext('2d');
|
||||
new Chart(barCtx, {
|
||||
type: 'bar',
|
||||
data: barData,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script src="{{ asset('js/script.js') }}"></script>
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue