2024-11-22 09:19:06 +00:00

190 lines
9.1 KiB
Plaintext

@model CatherineLynwood.Models.Questions
@using Humanizer
@{
ViewData["Title"] = "Ask A Question";
}
<div class="row">
<div class="col-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a asp-controller="Home" asp-action="Index" class="text-light">Home</a></li>
<li class="breadcrumb-item active text-white" aria-current="page">Ask A Question</li>
</ol>
</nav>
</div>
</div>
@if (Model.ShowThanks)
{
<div class="row">
<div class="col-12">
<div class="alert alert-success alert-dismissible fade show">
<strong class="alert-heading">Success!</strong><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button><br />
<p>
Your comments have been submitted and are awaiting approval. Thank you for your feedback.
</p>
</div>
</div>
</div>
}
<div class="row">
<div class="col-12">
<h1>Ask A Question</h1>
</div>
<div class="col-12">
The questions shown below have already been suggested, and are ones I plan to respond to in my upcoming podcast. If you have a question you'd like me
to answer, please use the form below to ask it. Try to make sure no one else has asked it previously.
</div>
<div class="col-12">
@foreach(var question in Model.AskedQuestions)
{
<div class="row align-items-center p-2">
<div class="col-2 col-md-1">
<i class="fad fa-question fa-3x text-white"></i>
</div>
<div class="col-10 col-md-11 bg-white text-dark rounded-3">
<div class="row p-3">
<div class="col-md-6">
Asked by: @question.Name
</div>
<div class="col-md-6">
Asked @question.QuestionDate.Humanize(true) on: @question.QuestionDate.ToString("dd MMMM yyyy 'at' h:mmtt")
</div>
</div>
<div class="row border-top pt-2">
<div class="col-12 pb-3">
@question.Name asked: &ldquo;<i>@question.Text</i>&rdquo;
</div>
</div>
</div>
</div>
}
</div>
</div>
<div class="row">
<div class="col-12">
<form asp-action="AskQuestion" class="row" id="question">
<div class="col-12 pb-3">
<h2>Ask A Question</h2>
In the future I intend to record a question and answer podcast. The idea is that you will be able to ask me anything about the
book I'm currently writing, or indeed anything else related to my work processes and ultimately getting my novel published. I might
even answer the occasional more personal question if you're that inquisitive. Please use the form below to ask your question. As on
our blog comments page I asked for your name, email address, age and sex, as these are all relevant to the question you're asking.
In the event I need you to clarify your question I may email you about it before including it in the podcast so please make sure your
email address is acurate.
</div>
<div class="col-12">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
</div>
<div class="col-md-4 text-dark">
<div class="form-floating mb-3">
<input asp-for="Name" name="Name" class="form-control">
<label asp-for="Name"></label>
<span asp-validation-for="Name" class="text-danger"></span>
</div>
</div>
<div class="col-md-4 text-dark">
<div class="form-floating mb-3">
<input asp-for="EmailAddress" name="EmailAddress" type="email" class="form-control">
<label asp-for="EmailAddress"></label>
<span asp-validation-for="EmailAddress" class="text-danger"></span>
</div>
</div>
<div class="col-6 col-md-2 text-dark">
<div class="form-floating mb-3">
<select asp-for="Age" name="Age" class="form-select" aria-label="Select your age">
<option value="" selected>Select your age</option>
@for (var age = 18; age <= 120; age++)
{
<option value="@age">@age</option>
})
</select>
<label asp-for="Age"></label>
<span asp-validation-for="Age" class="text-danger"></span>
</div>
</div>
<div class="col-6 col-md-2 text-dark">
<div class="form-floating mb-3">
<select asp-for="Sex" name="Sex" class="form-select" aria-label="Select your sex">
<option value="" selected>Select Gender</option>
<option value="female">Female</option>
<option value="male">Male</option>
<option value="other">Other</option>
<option value="prefer-not-to-say">Prefer not to say</option>
</select>
<label asp-for="Sex"></label>
<span asp-validation-for="Sex" class="text-danger"></span>
</div>
</div>
<div class="col-12 text-dark">
<div class="form-floating mb-3">
<textarea asp-for="Text" name="Text" style="height: 40vh;" class="form-control"></textarea>
<label asp-for="Text"></label>
<span asp-validation-for="Text" class="text-danger"></span>
</div>
</div>
<!-- Terms Agreement Section -->
<div class="col-12">
<div class="alert alert-info">
<h3 class="alert-heading">Please Note</h3>
<p>
By asking a question, you agree to allow us to contact you regarding your question. Additionally, you consent to receive occasional updates, blog posts, and news about our latest content and book releases. You may opt out of these communications at any time.
</p>
<div class="form-check pb-3">
<input type="checkbox" class="form-check-input" id="agreeTerms">
<label class="form-check-label" for="agreeTerms">
I agree to the terms and conditions.
</label>
<span id="termsWarning" class="text-danger d-none">Please accept the terms to proceed.</span>
</div>
</div>
</div>
<!-- Placeholder Button and Submit Button -->
<div class="d-grid">
<button type="button" class="btn btn-secondary mb-3" id="fakeSubmitButton">Ask Question</button>
<button type="submit" class="btn btn-dark mb-3 d-none" id="submitButton">Ask Question</button>
</div>
</form>
</div>
</div>
<script>
// JavaScript to handle checkbox and button toggle functionality
document.addEventListener("DOMContentLoaded", function () {
const agreeCheckbox = document.getElementById("agreeTerms");
const fakeSubmitButton = document.getElementById("fakeSubmitButton");
const submitButton = document.getElementById("submitButton");
const termsWarning = document.getElementById("termsWarning");
// Toggle buttons based on checkbox state
agreeCheckbox.addEventListener("change", function () {
if (this.checked) {
fakeSubmitButton.classList.add("d-none"); // Hide placeholder button
submitButton.classList.remove("d-none"); // Show real submit button
termsWarning.classList.add("d-none"); // Hide warning
} else {
fakeSubmitButton.classList.remove("d-none"); // Show placeholder button
submitButton.classList.add("d-none"); // Hide real submit button
}
});
// Show warning if placeholder button is clicked
fakeSubmitButton.addEventListener("click", function () {
termsWarning.classList.remove("d-none"); // Show warning
agreeCheckbox.focus(); // Focus on checkbox
});
});
</script>
@section Meta {
<meta name="description" content="Have a question for Catherine Lynwood? Ask anything about her books, characters, writing process, or themes explored in The Alpha Flame. Get involved today!">
<meta name="keywords" content="Catherine Lynwood, Ask a Question, The Alpha Flame, writing process, characters, novels, storytelling, author questions, book themes">
<meta name="author" content="Catherine Lynwood">
}