148 lines
5.4 KiB
Text
148 lines
5.4 KiB
Text
@model Questionnaire
|
|
@{
|
|
ViewData["Title"] = "DisplayQuestionnaire";
|
|
Layout = "~/Views/Shared/_QuestionnaireResponse.cshtml";
|
|
}
|
|
|
|
<style>
|
|
h5,h4{
|
|
color: #b9b9b9 !important;
|
|
}
|
|
.rating {
|
|
display: inline-flex;
|
|
flex-direction: row-reverse; /* Set the direction to row-reverse */
|
|
}
|
|
|
|
.rating input {
|
|
display: none;
|
|
}
|
|
|
|
.rating label {
|
|
cursor: pointer;
|
|
font-size: 0; /* Hide the labels */
|
|
}
|
|
|
|
.rating label:before {
|
|
content: "☆";
|
|
font-size: 25px; /* Set the font size of the stars */
|
|
}
|
|
|
|
.rating input:checked ~ label:before {
|
|
content: "★";
|
|
color: orange;
|
|
}
|
|
|
|
.slider-value {
|
|
display: block;
|
|
text-align: center;
|
|
margin-top: -20px; /* Adjust the margin to position the value */
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
<div class="d-flex flex-column" id="BannerBackground">
|
|
|
|
|
|
<section class="hero text-white">
|
|
<div class="container text-white mt-5">
|
|
<h4><strong>@Html.Raw(Model.Description)</strong> </h4>
|
|
@{
|
|
int questionNumber = 1; // Counter for question numbers, starting from 1
|
|
}
|
|
|
|
<form method="post" action="@Url.Action("Submit", "Questionnaire", new { id = Model.Id })">
|
|
<div class="container">
|
|
@foreach (var question in Model.Questions)
|
|
{
|
|
<h5>@questionNumber. @question.Text</h5> <!-- Display question number -->
|
|
<div>
|
|
@if (question.Type == QuestionType.Multiple_choice)
|
|
{
|
|
@foreach (var answer in question.Answers)
|
|
{
|
|
<label>
|
|
<input type="checkbox" name="answers[@question.Id]" value="@answer.Id" class="form-check-input" /> @answer.Text
|
|
</label>
|
|
<br />
|
|
}
|
|
}
|
|
else if (question.Type == QuestionType.Ranking)
|
|
{
|
|
<select name="answers[@question.Id]" class="form-control">
|
|
<option value="">Select Rank</option>
|
|
@for (int i = 1; i <= question.Answers.Count; i++)
|
|
{
|
|
<option value="@i">@i</option>
|
|
}
|
|
</select>
|
|
}
|
|
else if (question.Type == QuestionType.TrueFalse)
|
|
{
|
|
<label>
|
|
<input type="radio" name="answers[@question.Id]" value="true" class="form-check-input" /> True
|
|
</label>
|
|
<br />
|
|
<label>
|
|
<input type="radio" name="answers[@question.Id]" value="false" class="form-check-input" /> False
|
|
</label>
|
|
}
|
|
else if (question.Type == QuestionType.Rating)
|
|
{
|
|
<div class="rating">
|
|
@for (int i = 1; i <= question.Answers.Count; i++)
|
|
{
|
|
<input type="radio" id="star@(i)" name="answers[@question.Id]" value="@i" class="form-check-input" />
|
|
<label for="star@(i)" title="@i">☆</label>
|
|
}
|
|
</div>
|
|
}
|
|
else if (question.Type == QuestionType.Text)
|
|
{
|
|
<input type="text" name="answers[@question.Id]" class="form-control" />
|
|
}
|
|
else if (question.Type == QuestionType.Slider)
|
|
{
|
|
<input type="range" name="answers[@question.Id]" min="0" max="100" value="0" class="slider" oninput="updateSliderValue(this.value, 'sliderValue_@question.Id')" /> <!-- Set initial value to 0 -->
|
|
<span id="sliderValue_@question.Id" class="slider-value">0</span> <!-- Display the slider value -->
|
|
}
|
|
<!-- Add handling for other question types as needed -->
|
|
</div>
|
|
<hr />
|
|
@@questionNumber
|
|
++; // Increment question number after displaying
|
|
}
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
@section Scripts {
|
|
|
|
|
|
@{
|
|
<partial name="_ValidationScriptsPartial" />
|
|
}
|
|
|
|
<script>
|
|
function updateSliderValue(value, targetId) {
|
|
// Increase value by 10
|
|
value = parseInt(value) + 10;
|
|
document.getElementById(targetId).innerText = value;
|
|
}
|
|
</script>
|
|
|
|
}
|
|
|