Javascript - Free text box with answer

AI helped me write code to create a quiz question using a free text box answer with suggested answer and requirement to complete before continuing. Screenshots are attached to show what it looks like if the learner doesn't enter text and when they do.

Code is:

<div class="custom-container">

<h1 class="custom-header">ENTER QUESTION HERE</h1>

<div class="input-container">

<textarea id="myTextArea" class="custom-textbox" placeholder="Type your answer here..." rows="5"></textarea>

<button id="submitBtn" class="custom-submit-button">Submit</button>

<p id="submissionMessage" class="message"></p>

</div>

<!-- New element to display the suggested answer, hidden by default -->

<div id="suggestedAnswer" class="suggested-answer" style="display: none;">

<p><b>Answer:</b></p>

<p>ENTER ANSWER HERE</p>

</div>

</div>

<script>

document.addEventListener('DOMContentLoaded', function() {

const submitBtn = document.getElementById('submitBtn');

const textArea = document.getElementById('myTextArea');

const submissionMessage = document.getElementById('submissionMessage');

const suggestedAnswer = document.getElementById('suggestedAnswer');

submitBtn.addEventListener('click', function() {

// Check if the text box has content

if (textArea.value.trim() !== '') {

// Sends the completion message to the parent Rise window

window.parent.postMessage({ type: 'complete' }, '*');

 

// Update UI to show completion

submissionMessage.innerText = 'Submission successful!';

submissionMessage.style.color = '#001655';

submitBtn.disabled = true;

textArea.disabled = true;

// Show the suggested answer

suggestedAnswer.style.display = 'block';

} else {

// Provide feedback to the learner if they didn't enter text

submissionMessage.innerText = 'Please enter your response before submitting.';

submissionMessage.style.color = '#d32f2f'; // A red color for errors

}

});

});

</script>

<style>

.custom-container {

background-color: white;

font-family: Arial, sans-serif;

text-align: center;

padding: 0px;

border-radius: 8px;

margin: 0 auto; /* Center the container */

max-width: 850px;

}

.custom-header {

color: #001655; /* Use the hex code for the header color */

font-size: 20px; /* Updated header font size */

margin-bottom: 20px;

}

.input-container {

display: flex;

flex-direction: column;

align-items: center;

}

.custom-textbox {

width: 100%;

max-width: 850px;

background-color: #e2f0fa;

color: #001965;

border: 1px solid #c8dbe6;

padding: 15px;

font-size: 17px; /* Updated text box font size */

line-height: 1.5;

border-radius: 5px;

box-sizing: border-box; /* Ensures padding is included in width */

}

.custom-submit-button {

background-color: #001965; /* Dark blue for the button */

color: white;

border: none;

padding: 12px 24px;

font-size: 18px;

cursor: pointer;

margin-top: 10px;

border-radius: 5px;

transition: background-color 0.3s ease;

}

.custom-submit-button:hover {

background-color: #003366; /* A slightly lighter blue on hover */

}

.message {

margin-top: 15px;

font-weight: bold;

min-height: 20px; /* Prevents layout shift */

}

.suggested-answer {

text-align: left;

margin-top: 30px;

padding: 10px;

background-color: #f0f8ff;

border: 1px solid #c8dbe6;

border-radius: 5px;

}

.suggested-answer p {

margin: 0 0 10px 0;

color: #001965;

}

.suggested-answer p:last-child {

margin-bottom: 0;

}

</style>