google_forms/application/views/edit_form_view.php

207 lines
9.5 KiB
PHP
Raw Normal View History

2024-07-19 10:46:18 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit Form</title>
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/bootstrap.min.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/jquery-ui.css">
2024-07-22 09:49:37 +00:00
2024-07-19 10:46:18 +00:00
<style>
/* Include your styles here */
</style>
</head>
<body>
<div class="container">
<div class="form-header">
<button id="preview-btn" class="btn btn-info"><i class="fas fa-eye"></i></button>
<input type="text" id="form-title" class="form-control" value="<?php echo $form['title']; ?>">
<input type="text" id="form-description" class="form-control" value="<?php echo $form['description']; ?>">
<button id="add-section-btn" class="btn btn-primary">+</button>
</div>
<div id="form-container">
2024-07-22 09:49:37 +00:00
<?php foreach ($questions as $question): ?>
<div class="form-section" data-index="<?php echo $question['id']; ?>" data-type="<?php echo $question['type']; ?>">
<div class="header-row">
<textarea class="form-control untitled-question" placeholder="Untitled Question" rows="1"><?php echo $question['text']; ?></textarea>
<select class="custom-select">
<option value="short-answer" <?php echo $question['type'] == 'short-answer' ? 'selected' : ''; ?>>Short Answer</option>
<option value="paragraph" <?php echo $question['type'] == 'paragraph' ? 'selected' : ''; ?>>Paragraph</option>
<option value="multiple-choice" <?php echo $question['type'] == 'multiple-choice' ? 'selected' : ''; ?>>Multiple Choice</option>
<option value="checkboxes" <?php echo $question['type'] == 'checkboxes' ? 'selected' : ''; ?>>Checkboxes</option>
<option value="dropdown" <?php echo $question['type'] == 'dropdown' ? 'selected' : ''; ?>>Dropdown</option>
</select>
<label class="toggle-switch">
<input type="checkbox" class="required-toggle" <?php echo $question['is_required'] ? 'checked' : ''; ?>>
<span class="slider"></span>
</label>
<span class="delete-section-icon"><i class="fas fa-trash-alt"></i></span>
</div>
<div class="options-container">
<?php
// Fetch options for this question only
$this->db->where('question_id', $question['id']);
$options = $this->db->get('options')->result_array();
foreach ($options as $option):
?>
<div class="option">
<input type="text" class="form-control option-label" value="<?php echo $option['option_text']; ?>">
<span class="delete-option-icon">&times;</span>
</div>
<?php endforeach; ?>
</div>
<!-- Show or hide the "Add Option" button based on question type -->
<?php if ($question['type'] === 'multiple-choice' || $question['type'] === 'checkboxes' || $question['type'] === 'dropdown'): ?>
<button class="btn btn-secondary add-option-btn">Add Option</button>
<?php endif; ?>
2024-07-19 10:46:18 +00:00
</div>
<?php endforeach; ?>
</div>
<button id="submit-btn" class="btn btn-success" style="margin-left: 240px; margin-top: 20px">Submit</button>
</div>
<script src="<?php echo base_url('assets/js/jquery.min.js'); ?>"></script>
<script src="<?php echo base_url('assets/js/bootstrap.min.js'); ?>"></script>
<script src="<?php echo base_url('assets/js/jquery-ui.js'); ?>"></script>
2024-07-22 09:49:37 +00:00
<!-- <script src="<?php echo base_url('assets/js/scripts.js'); ?>"></script> -->
2024-07-19 10:46:18 +00:00
<script>
2024-07-22 09:49:37 +00:00
$(document).ready(function() {
2024-07-19 10:46:18 +00:00
var base_url = '<?php echo base_url(); ?>';
// Add section button functionality
$('#add-section-btn').on('click', function() {
var sectionHtml = `
2024-07-22 09:49:37 +00:00
<div class="form-section" data-type="">
2024-07-19 10:46:18 +00:00
<div class="header-row">
<textarea class="form-control untitled-question" placeholder="Untitled Question" rows="1"></textarea>
<select class="custom-select">
<option value="short-answer">Short Answer</option>
<option value="paragraph">Paragraph</option>
<option value="multiple-choice">Multiple Choice</option>
<option value="checkboxes">Checkboxes</option>
<option value="dropdown">Dropdown</option>
</select>
<label class="toggle-switch">
<input type="checkbox" class="required-toggle">
<span class="slider"></span>
</label>
<span class="delete-section-icon"><i class="fas fa-trash-alt"></i></span>
</div>
2024-07-22 09:49:37 +00:00
<div class="options-container"></div>
<button class="btn btn-secondary add-option-btn" style="display: none;">Add Option</button>
2024-07-19 10:46:18 +00:00
</div>
`;
$('#form-container').append(sectionHtml);
});
// Add option button functionality
$(document).on('click', '.add-option-btn', function() {
var optionHtml = `
<div class="option">
<input type="text" class="form-control option-label" placeholder="Option">
<span class="delete-option-icon">&times;</span>
</div>
`;
$(this).siblings('.options-container').append(optionHtml);
});
// Delete option functionality
$(document).on('click', '.delete-option-icon', function() {
$(this).parent().remove();
});
// Delete section functionality
$(document).on('click', '.delete-section-icon', function() {
$(this).closest('.form-section').remove();
});
2024-07-22 09:49:37 +00:00
// Show/Hide "Add Option" button based on question type
$(document).on('change', '.custom-select', function() {
var type = $(this).val();
var $section = $(this).closest('.form-section');
if (type === 'multiple-choice' || type === 'checkboxes' || type === 'dropdown') {
$section.find('.add-option-btn').show();
} else {
$section.find('.add-option-btn').hide();
}
}).trigger('change'); // Trigger change to apply to existing sections
2024-07-19 10:46:18 +00:00
// Submit button functionality
$('#submit-btn').on('click', function() {
var formData = collectFormData();
formData['form_id'] = <?php echo $form['id']; ?>;
2024-07-22 09:49:37 +00:00
let validation = validateFormData(formData);
if (!validation.isValid) {
alert(validation.message);
return;
}
2024-07-19 10:46:18 +00:00
$.ajax({
url: base_url + 'Form_controller/update_form',
type: 'POST',
data: { formData: formData },
dataType: 'JSON',
success: function(response) {
if (response.status === 'success') {
alert('Form updated successfully!');
2024-07-22 09:49:37 +00:00
window.location.href = base_url + 'Form_controller/index_forms_draft';
2024-07-19 10:46:18 +00:00
} else {
alert(response.message);
}
},
error: function(error) {
alert('Error updating form!');
console.log(error);
}
});
});
// Collect form data function
function collectFormData() {
var formData = {
title: $('#form-title').val(),
description: $('#form-description').val(),
questions: []
};
$('.form-section').each(function() {
var questionData = {
id: $(this).data('index'),
text: $(this).find('.untitled-question').val(),
type: $(this).find('.custom-select').val(),
2024-07-22 09:49:37 +00:00
required: $(this).find('.required-toggle').is(':checked') ? 1 : 0, // Correctly capture the required value
2024-07-19 10:46:18 +00:00
options: []
};
$(this).find('.option-label').each(function() {
questionData.options.push($(this).val());
});
formData.questions.push(questionData);
});
return formData;
}
2024-07-22 09:49:37 +00:00
function validateFormData(formData) {
for (let question of formData.questions) {
if (!question.text.trim()) {
return { isValid: false, message: 'All questions must have text.' };
}
if ((question.type === 'multiple-choice' || question.type === 'checkboxes' || question.type === 'dropdown') && question.options.length === 0) {
return { isValid: false, message: 'All options-based questions must have at least one option.' };
}
for (let option of question.options) {
if (!option.trim()) {
return { isValid: false, message: 'All options must have text.' };
}
}
}
return { isValid: true };
}
2024-07-19 10:46:18 +00:00
});
</script>
</body>
</html>