2024-07-17 12:21:51 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Form Preview - Google Forms</title>
|
|
|
|
|
<link rel="stylesheet" href="https://bootswatch.com/3/flatly/bootstrap.min.css">
|
2024-07-22 09:49:37 +00:00
|
|
|
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/response_submit.css">
|
|
|
|
|
|
|
|
|
|
<script>
|
2024-07-23 12:54:27 +00:00
|
|
|
function validateForm() {
|
|
|
|
|
let isValid = true;
|
|
|
|
|
document.querySelectorAll('.question-container').forEach(function(container) {
|
|
|
|
|
let isRequired = container.dataset.required === '1';
|
|
|
|
|
let questionType = container.dataset.type;
|
|
|
|
|
let isAnswered = false;
|
|
|
|
|
|
|
|
|
|
// Select inputs relevant to the question type
|
|
|
|
|
let inputs = container.querySelectorAll('input[type="text"], textarea, select, input[type="radio"]:checked, input[type="checkbox"]:checked');
|
|
|
|
|
if (inputs.length > 0) {
|
|
|
|
|
inputs.forEach(function(input) {
|
|
|
|
|
if (input.type === 'text' || input.tagName.toLowerCase() === 'textarea') {
|
|
|
|
|
if (input.value.trim() !== '') {
|
|
|
|
|
isAnswered = true;
|
|
|
|
|
}
|
|
|
|
|
} else if (input.type === 'radio' || input.type === 'checkbox') {
|
|
|
|
|
isAnswered = true;
|
|
|
|
|
} else if (input.tagName.toLowerCase() === 'select') {
|
|
|
|
|
if (input.value.trim() !== '') {
|
|
|
|
|
isAnswered = true;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (isRequired && !isAnswered) {
|
2024-07-25 12:54:05 +00:00
|
|
|
container.style.border = '2px solid red';
|
2024-07-23 12:54:27 +00:00
|
|
|
isValid = false;
|
|
|
|
|
} else {
|
|
|
|
|
container.style.border = 'none';
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
return isValid;
|
|
|
|
|
}
|
2024-07-26 12:41:46 +00:00
|
|
|
|
|
|
|
|
function closePopup() {
|
|
|
|
|
document.getElementById('popup-message').style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Display the popup message when the page loads
|
|
|
|
|
window.onload = function() {
|
|
|
|
|
if (document.getElementById('popup-message')) {
|
|
|
|
|
document.getElementById('popup-message').style.display = 'block';
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.popup-message {
|
|
|
|
|
display: none;
|
|
|
|
|
position: fixed;
|
2024-07-29 09:17:16 +00:00
|
|
|
top: 10%;
|
|
|
|
|
left: 40%;
|
|
|
|
|
transform: translate(-20%, -40%);
|
2024-07-26 12:41:46 +00:00
|
|
|
background-color: white;
|
2024-07-29 09:17:16 +00:00
|
|
|
padding: 30px;
|
|
|
|
|
width: 80%;
|
|
|
|
|
max-width: 600px;
|
|
|
|
|
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
|
2024-07-26 12:41:46 +00:00
|
|
|
z-index: 1000;
|
2024-07-29 09:17:16 +00:00
|
|
|
border-top: 10px solid rgb(103, 58, 183);
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popup-message h2 {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
color: rgb(103, 58, 183);
|
|
|
|
|
font-size: 24px; /* Increase font size */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popup-message p {
|
|
|
|
|
font-size: 18px; /* Increase font size */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popup-message button {
|
|
|
|
|
background-color: rgb(103, 58, 183);
|
|
|
|
|
color: white;
|
|
|
|
|
border: none;
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popup-message button:hover {
|
|
|
|
|
background-color: darkviolet;
|
2024-07-26 12:41:46 +00:00
|
|
|
}
|
|
|
|
|
</style>
|
2024-07-23 12:54:27 +00:00
|
|
|
|
2024-07-17 12:21:51 +00:00
|
|
|
</head>
|
2024-07-29 09:17:16 +00:00
|
|
|
|
2024-07-17 12:21:51 +00:00
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
2024-07-26 12:41:46 +00:00
|
|
|
<!-- <div class="form-header">
|
2024-07-17 12:21:51 +00:00
|
|
|
<h2><?php echo $form->title; ?></h2>
|
|
|
|
|
<h4><?php echo $form->description; ?></h4>
|
2024-07-26 12:41:46 +00:00
|
|
|
</div> -->
|
|
|
|
|
|
2024-08-09 12:04:48 +00:00
|
|
|
<?php if (isset($message)) : ?>
|
2024-07-26 12:41:46 +00:00
|
|
|
<div id="popup-message" class="popup-message">
|
|
|
|
|
<p><?php echo $message; ?></p>
|
|
|
|
|
<button onclick="closePopup()">Close</button>
|
|
|
|
|
</div>
|
2024-08-09 12:04:48 +00:00
|
|
|
<?php else : ?>
|
2024-07-26 12:41:46 +00:00
|
|
|
<form action="<?php echo base_url('response_submit/submit_form'); ?>" method="post" onsubmit="return validateForm();">
|
|
|
|
|
<input type="hidden" name="form_id" value="<?php echo $form->id; ?>">
|
|
|
|
|
<div class="form-section">
|
2024-08-09 12:04:48 +00:00
|
|
|
<?php foreach ($questions as $question) : ?>
|
2024-07-26 12:41:46 +00:00
|
|
|
<div class="question-container" data-required="<?php echo $question->is_required; ?>" data-type="<?php echo $question->type; ?>">
|
|
|
|
|
<input type="hidden" name="responses[<?php echo $question->id; ?>][question_id]" value="<?php echo $question->id; ?>">
|
|
|
|
|
<input type="hidden" name="responses[<?php echo $question->id; ?>][form_id]" value="<?php echo $form->id; ?>">
|
|
|
|
|
<label class="<?php echo $question->is_required ? 'required-field' : ''; ?>"><?php echo $question->text; ?></label>
|
2024-08-09 12:04:48 +00:00
|
|
|
<?php if ($question->type == 'multiple-choice') : ?>
|
|
|
|
|
<?php foreach ($question->options as $option) : ?>
|
2024-07-26 12:41:46 +00:00
|
|
|
<div class="option">
|
|
|
|
|
<input type="radio" name="responses[<?php echo $question->id; ?>][options][]" value="<?php echo $option->option_text; ?>">
|
|
|
|
|
<label><?php echo $option->option_text; ?></label>
|
|
|
|
|
</div>
|
2024-07-17 12:21:51 +00:00
|
|
|
<?php endforeach; ?>
|
2024-08-09 12:04:48 +00:00
|
|
|
<?php elseif ($question->type == 'checkboxes') : ?>
|
|
|
|
|
<?php foreach ($question->options as $option) : ?>
|
2024-07-26 12:41:46 +00:00
|
|
|
<div class="option">
|
|
|
|
|
<input type="checkbox" name="responses[<?php echo $question->id; ?>][options][]" value="<?php echo $option->option_text; ?>">
|
|
|
|
|
<label><?php echo $option->option_text; ?></label>
|
|
|
|
|
</div>
|
|
|
|
|
<?php endforeach; ?>
|
2024-08-09 12:04:48 +00:00
|
|
|
<?php elseif ($question->type == 'short-answer') : ?>
|
2024-07-26 12:41:46 +00:00
|
|
|
<input type="text" class="form-control" name="responses[<?php echo $question->id; ?>][answered_text]" placeholder="Short answer text">
|
2024-08-09 12:04:48 +00:00
|
|
|
<?php elseif ($question->type == 'paragraph') : ?>
|
2024-07-26 12:41:46 +00:00
|
|
|
<textarea class="form-control" name="responses[<?php echo $question->id; ?>][answered_text]" placeholder="Paragraph text"></textarea>
|
2024-08-09 12:04:48 +00:00
|
|
|
<?php elseif ($question->type == 'dropdown') : ?>
|
2024-07-26 12:41:46 +00:00
|
|
|
<select class="form-control" name="responses[<?php echo $question->id; ?>][answered_text]">
|
2024-08-09 12:04:48 +00:00
|
|
|
<?php foreach ($question->options as $option) : ?>
|
2024-07-26 12:41:46 +00:00
|
|
|
<option value="<?php echo $option->option_text; ?>"><?php echo $option->option_text; ?></option>
|
|
|
|
|
<?php endforeach; ?>
|
|
|
|
|
</select>
|
|
|
|
|
<?php endif; ?>
|
|
|
|
|
</div>
|
|
|
|
|
<?php endforeach; ?>
|
|
|
|
|
</div>
|
|
|
|
|
<button type="submit" class="btn btn-success" style="display: block; margin: 20px auto 20px 240px; background-color: rgb(103, 58, 183); border-color: rgb(103, 58, 183); color: white;">Submit</button>
|
|
|
|
|
</form>
|
|
|
|
|
<?php endif; ?>
|
2024-07-17 12:21:51 +00:00
|
|
|
</div>
|
2024-07-26 12:41:46 +00:00
|
|
|
|
2024-07-17 12:21:51 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
