debugged the js
This commit is contained in:
jostheta
parent
a64c675132
commit
77b8770aef
|
|
@ -63,7 +63,7 @@ class Forms extends CI_Controller
|
|||
}
|
||||
$this->load->view('templates/header', $data);
|
||||
$this->load->view('forms/view_form', $data);
|
||||
$this->load->view('templates/footer', $data);
|
||||
//footer intentionally omitted
|
||||
}
|
||||
|
||||
public function delete_form($form_id) {
|
||||
|
|
@ -233,14 +233,23 @@ class Forms extends CI_Controller
|
|||
$this->load->view('templates/footer');
|
||||
}
|
||||
|
||||
public function list_user_published_forms() {
|
||||
public function list_user_published_forms() {
|
||||
$user_id = $this->session->userdata('user_id');
|
||||
$data['forms'] = $this->Form_model->get_published_forms_by_user($user_id);
|
||||
|
||||
$this->load->view('templates/header');
|
||||
$this->load->view('forms/user_forms', $data);
|
||||
$this->load->view('templates/footer');
|
||||
}
|
||||
}
|
||||
|
||||
public function edit_form(){
|
||||
$formData = $this->input->post('formData');
|
||||
$decodedData = json_decode($formData, true);
|
||||
// Process the form data here
|
||||
// Example: Save the form data to the database
|
||||
|
||||
$this->load->model('Form_model');
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,69 +2,86 @@
|
|||
<br>
|
||||
<div class="section">
|
||||
<div class="form-container">
|
||||
<input type="text" id="form-title" value="<?= htmlspecialchars($form->title, ENT_QUOTES, 'UTF-8') ?>" class="form_container_top_title" style="color: black;" placeholder="Untitled Form">
|
||||
<input type="text" id="form-desc" value="<?= htmlspecialchars($form->description, ENT_QUOTES, 'UTF-8') ?>" class="form_container_top_desc" style="color: black;" placeholder="Form Description">
|
||||
<input type="text" id="form-title" value="<?= htmlspecialchars($form->title, ENT_QUOTES, 'UTF-8') ?>" class="form_container_top_title" style="color: black;" placeholder="Untitled Form">
|
||||
<input type="text" id="form-desc" value="<?= htmlspecialchars($form->description, ENT_QUOTES, 'UTF-8') ?>" class="form_container_top_desc" style="color: black;" placeholder="Form Description">
|
||||
|
||||
<div id="questions-container">
|
||||
<?php if (!empty($questions)) : ?>
|
||||
<?php foreach ($questions as $index => $question) : ?>
|
||||
<div class="question-box" data-question-type="<?= htmlspecialchars($question->question_type, ENT_QUOTES, 'UTF-8') ?>" id="question-template" data-question_id="<?=htmlspecialchars($question->question_id, ENT_QUOTES, 'UTF-8')?>">
|
||||
<div class="question-box_header">
|
||||
<input type="text" value="<?= htmlspecialchars($question->question_text, ENT_QUOTES, 'UTF-8') ?>" class="question-box_header_question" style="color: black;" placeholder="Question <?= $index + 1 ?>">
|
||||
<img src="<?= base_url() ?>assets/images/image.png" alt="add an image" height="20px" width="20px">
|
||||
<div class="question-box_header_question-type">
|
||||
<select id="question-type" class="question-box_header_question-type_select">
|
||||
<option value="multiple-choice" <?= $question->question_type == 'multiple-choice' ? 'selected' : '' ?>>Multiple choice</option>
|
||||
<option value="checkbox" <?= $question->question_type == 'checkbox' ? 'selected' : '' ?>>Checkbox</option>
|
||||
<option value="paragraph" <?= $question->question_type == 'paragraph' ? 'selected' : '' ?>>Paragraph</option>
|
||||
</select>
|
||||
<div id="questions-container">
|
||||
<?php if (!empty($questions)) : ?>
|
||||
<?php foreach ($questions as $index => $question) : ?>
|
||||
<div class="question-box" data-question-type="<?= htmlspecialchars($question->question_type, ENT_QUOTES, 'UTF-8') ?>" data-question_id="<?= htmlspecialchars($question->question_id, ENT_QUOTES, 'UTF-8') ?>" id="question-template">
|
||||
<div class="question-box_header">
|
||||
<input type="text" value="<?= htmlspecialchars($question->question_text, ENT_QUOTES, 'UTF-8') ?>" class="question-box_header_question" style="color: black;" placeholder="Question <?= $index + 1 ?>">
|
||||
<img src="<?= base_url() ?>assets/images/image.png" alt="add an image" height="20px" width="20px">
|
||||
<div class="question-box_header_question-type">
|
||||
<select class="question-box_header_question-type_select">
|
||||
<option value="multiple-choice" <?= $question->question_type == 'multiple-choice' ? 'selected' : '' ?>>Multiple choice</option>
|
||||
<option value="checkbox" <?= $question->question_type == 'checkbox' ? 'selected' : '' ?>>Checkbox</option>
|
||||
<option value="paragraph" <?= $question->question_type == 'paragraph' ? 'selected' : '' ?>>Paragraph</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="question-box_header-style">
|
||||
|
||||
<button><img src="<?= base_url() ?>assets/images/bold.png" width="14px" height="14px"></button>
|
||||
<button><img src="<?= base_url() ?>assets/images/italics.png" width="14px" height="14px"></button>
|
||||
<button><img src="<?= base_url() ?>assets/images/underline.png" width="16px" height="16px"></button>
|
||||
</div>
|
||||
<br>
|
||||
<div class="question-box_short-answer" style="display: <?= $question->question_type == 'paragraph' ? 'block' : 'none' ?>;">
|
||||
<div class="question-box_short-answer_placeholder">Paragraph</div>
|
||||
</div>
|
||||
<div class="options-container" style="display: <?= $question->question_type == 'paragraph' ? 'none' : 'block' ?>;">
|
||||
<?php if (!empty($question->options)) : ?>
|
||||
<?php foreach ($question->options as $optionIndex => $option) : ?>
|
||||
<div class="question-box_option-block" data-option_id="<?= htmlspecialchars($option->option_id, ENT_QUOTES, 'UTF-8') ?>">
|
||||
<img class="question-type-image" src="<?= base_url() ?>assets/images/<?= $question->question_type == 'multiple-choice' ? 'circle' : 'square' ?>.png" alt="option <?= $question->question_type ?>" width="16px" height="16px">
|
||||
<input type="text" value="<?= htmlspecialchars($option->option_text, ENT_QUOTES, 'UTF-8') ?>" class="question-box_option-block_option-text" placeholder="Option <?= $optionIndex + 1 ?>">
|
||||
<?php if ($optionIndex > 0) : ?>
|
||||
<button class="question-box_option-block_option-close"><img src="<?= base_url() ?>assets/images/close.png" alt="close option"></button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<br>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
<div id="new-options"></div>
|
||||
<div class="question-box_add-option">
|
||||
<button class="add-option" style="color:#1a73e8;font-weight: 500;">Add Option</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="question-box_footer">
|
||||
<button class="duplicate-question"><img src="<?= base_url() ?>assets/images/duplicate.png" width="24px" height="24px"></button>
|
||||
<button class="delete-question"><img src="<?= base_url() ?>assets/images/trash.png" alt="delete question"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="question-box_header-style">
|
||||
|
||||
<button><img src="<?= base_url() ?>assets/images/bold.png" width="14px" height="14px"></button>
|
||||
<button><img src="<?= base_url() ?>assets/images/italics.png" width="14px" height="14px"></button>
|
||||
<button><img src="<?= base_url() ?>assets/images/underline.png" width="16px" height="16px"></button>
|
||||
</div>
|
||||
<br>
|
||||
<div class="question-box_short-answer" style="display: <?= $question->question_type == 'paragraph' ? 'block' : 'none' ?>;">
|
||||
<div class="question-box_short-answer_placeholder">Paragraph</div>
|
||||
</div>
|
||||
<div id="options-container" style="display: <?= $question->question_type == 'paragraph' ? 'none' : 'block' ?>;">
|
||||
<?php if (!empty($question->options)) : ?>
|
||||
<?php foreach ($question->options as $optionIndex => $option) : ?>
|
||||
<div class="question-box_option-block" id="option-template" data-option_id="<?=htmlspecialchars($option->option_id, ENT_QUOTES, 'UTF-8') ?>" >
|
||||
<img id="question-type-image"src="<?= base_url() ?>assets/images/<?= $question->question_type == 'multiple-choice' ? 'circle' : 'square' ?>.png" alt="option <?= $question->question_type ?>" width="16px" height="16px">
|
||||
<input type="text" value="<?= htmlspecialchars($option->option_text, ENT_QUOTES, 'UTF-8') ?>" class="question-box_option-block_option-text" placeholder="Option <?= $optionIndex + 1 ?>">
|
||||
<?php if ($optionIndex > 0) : ?>
|
||||
<button class="question-box_option-block_option-close"><img src="<?= base_url() ?>assets/images/close.png" alt="close option"></button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<br>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
<div id="new-options"></div>
|
||||
<div class="question-box_add-option">
|
||||
<button id="add-option" style="color:#1a73e8;font-weight: 500;">Add Option</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="question-box_footer">
|
||||
<button class="duplicate-question"><img src="<?= base_url() ?>assets/images/duplicate.png" width="24px" height="24px"></button>
|
||||
<button class="delete-question"><img src="<?= base_url() ?>assets/images/trash.png" alt="delete question"></button>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<?php endforeach; ?>
|
||||
<?php else : ?>
|
||||
<p>No questions found for this form.</p>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
<?php else : ?>
|
||||
<p>No questions found for this form.</p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<button id="add-question">
|
||||
<img src="<?= base_url() ?>assets/images/add.png" width="20px" height="20px" alt="add button">
|
||||
</button>
|
||||
<button id="update-form" data-form_id="<?=$form->form_id;?>" style="color: #fff; background-color: #1a73e8; font-weight: 500; padding: 10px; border: none;">Update</button>
|
||||
<button id="update-form" data-form_id="<?= $form->form_id; ?>" style="color: #fff; background-color: #1a73e8; font-weight: 500; padding: 10px; border: none;">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Option Template -->
|
||||
<div id="option-template" style="display:none;">
|
||||
<div class="question-box_option-block">
|
||||
<img class="question-type-image" src="<?= base_url() ?>assets/images/circle.png" alt="option multiple-choice" width="16px" height="16px">
|
||||
<input type="text" class="question-box_option-block_option-text" placeholder="Option">
|
||||
<button class="question-box_option-block_option-close"><img src="<?= base_url() ?>assets/images/close.png" alt="close option"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var base_url = '<?= base_url() ?>';
|
||||
</script>
|
||||
<script src="<?= base_url() ?>assets/js/jquery.js"></script>
|
||||
<script src="<?= base_url() ?>assets/js/edit.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ $(document).ready(function() {
|
|||
console.log('jQuery is ready');
|
||||
let questionCount = 0;
|
||||
|
||||
// Add new question
|
||||
$('#add-question').click(function() {
|
||||
questionCount++;
|
||||
|
||||
|
|
@ -11,36 +10,152 @@ $(document).ready(function() {
|
|||
newQuestion.removeAttr('id');
|
||||
newQuestion.attr('data-question-type', 'multiple-choice'); // Set default question type
|
||||
newQuestion.find('.question-box_header_question').attr('placeholder', 'Question ' + questionCount);
|
||||
newQuestion.find('.question-box_option-block_option-text').attr('placeholder', 'Option 1');
|
||||
newQuestion.find('.question-type-image').attr('src', base_url + 'assets/images/circle.png');
|
||||
newQuestion.find('.question-type-image').attr('alt', 'Circle for Multiple Choice');
|
||||
|
||||
// Clear question text and remove existing options
|
||||
newQuestion.find('.question-box_header_question').val('');
|
||||
newQuestion.find('.question-box_option-block').each(function(index) {
|
||||
if (index === 0) {
|
||||
// Keep the first option placeholder text, clear others
|
||||
$(this).find('.question-box_option-block_option-text').val('').attr('placeholder', 'Option 1');
|
||||
} else {
|
||||
$(this).remove();
|
||||
}
|
||||
});
|
||||
newQuestion.find('.question-box_option-block:first').next('br').remove();
|
||||
newQuestion.find('#new-options').children('br').remove();
|
||||
|
||||
newQuestion.show(); // Ensure the cloned template is visible
|
||||
|
||||
// Append the cloned question to the form container
|
||||
$('#question-template').parent().append(newQuestion);
|
||||
$('#questions-container').append(newQuestion);
|
||||
});
|
||||
|
||||
// Add new option to a question
|
||||
$(document).on('click', '#add-option', function() {
|
||||
|
||||
//add new option
|
||||
$(document).on('click', '.add-option', function() {
|
||||
const questionBox = $(this).closest('.question-box');
|
||||
const currentQuestionType = questionBox.attr('data-question-type');
|
||||
let optionCount = questionBox.find('.question-box_option-block').length + 1;
|
||||
|
||||
var newOption = $('#option-template').clone();
|
||||
newOption.removeAttr('id');
|
||||
var newOption = $('#option-template .question-box_option-block').clone();
|
||||
newOption.find('input').val('');
|
||||
newOption.find('input').attr('placeholder', 'Option ' + optionCount);
|
||||
|
||||
if (currentQuestionType === 'multiple-choice') {
|
||||
newOption.find('img').attr('src', base_url+'assets/images/circle.png');
|
||||
newOption.find('.question-type-image').attr('src', base_url + 'assets/images/circle.png');
|
||||
newOption.find('.question-type-image').attr('alt', 'Circle for Multiple Choice');
|
||||
} else if (currentQuestionType === 'checkbox') {
|
||||
newOption.find('img').attr('src', base_url+'assets/images/square.png');
|
||||
newOption.find('.question-type-image').attr('src', base_url + 'assets/images/square.png');
|
||||
newOption.find('.question-type-image').attr('alt', 'Square for Checkbox');
|
||||
}
|
||||
|
||||
// Check if the close button already exists before appending it
|
||||
if (optionCount > 1 && newOption.find('.question-box_option-block_option-close').length === 0) {
|
||||
newOption.append('<button class="question-box_option-block_option-close"><img src="' + base_url + 'assets/images/close.png" alt="close option"></button>');
|
||||
}
|
||||
|
||||
// Append new option to the options container
|
||||
questionBox.find('#new-options').append(newOption);
|
||||
|
||||
// Append <br> tag if it's not the last option
|
||||
if (optionCount > 1) {
|
||||
newOption.append('<button class="question-box_option-block_option-close"><img src="'+base_url+'assets/images/close.png" alt="close option"></button>');
|
||||
questionBox.find('#new-options').append('<br>');
|
||||
}
|
||||
|
||||
questionBox.find('#new-options').append(newOption).append('<br>');
|
||||
});
|
||||
|
||||
// Remove an option from a question
|
||||
$(document).on('click', '.question-box_option-block_option-close', function() {
|
||||
$(this).closest('.question-box_option-block').next('br').remove();
|
||||
$(this).closest('.question-box_option-block').remove();
|
||||
});
|
||||
|
||||
// Delete a question
|
||||
$(document).on('click', '.delete-question', function() {
|
||||
$(this).closest('.question-box').next('br').remove();
|
||||
$(this).closest('.question-box').remove();
|
||||
});
|
||||
|
||||
// Duplicate a question
|
||||
$(document).on('click', '.duplicate-question', function() {
|
||||
const originalQuestion = $(this).closest('.question-box');
|
||||
const duplicateQuestion = originalQuestion.clone();
|
||||
|
||||
duplicateQuestion.removeAttr('id');
|
||||
duplicateQuestion.show();
|
||||
|
||||
originalQuestion.after(duplicateQuestion).after('<br>');
|
||||
});
|
||||
|
||||
// Handle question type change
|
||||
$(document).on('change', '.question-box_header_question-type_select', function() {
|
||||
const selectedType = $(this).val();
|
||||
const questionBox = $(this).closest('.question-box');
|
||||
const images = questionBox.find('.question-type-image');
|
||||
const optionsContainer = questionBox.find('.options-container');
|
||||
const shortAnswerContainer = questionBox.find('.question-box_short-answer');
|
||||
|
||||
if (selectedType === 'multiple-choice') {
|
||||
images.attr('src', base_url + 'assets/images/circle.png');
|
||||
images.attr('alt', 'Circle for Multiple Choice');
|
||||
optionsContainer.show();
|
||||
shortAnswerContainer.hide();
|
||||
} else if (selectedType === 'checkbox') {
|
||||
images.attr('src', base_url + 'assets/images/square.png');
|
||||
images.attr('alt', 'Square for Checkbox');
|
||||
optionsContainer.show();
|
||||
shortAnswerContainer.hide();
|
||||
} else if (selectedType === 'paragraph') {
|
||||
images.attr('src', '');
|
||||
images.attr('alt', '');
|
||||
optionsContainer.hide();
|
||||
shortAnswerContainer.show();
|
||||
}
|
||||
|
||||
questionBox.attr('data-question-type', selectedType);
|
||||
}).trigger('change');
|
||||
|
||||
$('#update-form').click(function() {
|
||||
var formData = {
|
||||
title: $('#form-title').val(),
|
||||
description: $('#form-desc').val(),
|
||||
questions: []
|
||||
};
|
||||
|
||||
$('.question-box').each(function() {
|
||||
var questionBox = $(this);
|
||||
var questionData = {
|
||||
question_text: questionBox.find('.question-box_header_question').val(),
|
||||
question_type: questionBox.find('.question-box_header_question-type_select').val(),
|
||||
options: []
|
||||
};
|
||||
|
||||
if (questionData.question_type !== 'paragraph') {
|
||||
questionBox.find('.question-box_option-block').each(function() {
|
||||
var optionData = {
|
||||
option_text: $(this).find('.question-box_option-block_option-text').val()
|
||||
};
|
||||
questionData.options.push(optionData);
|
||||
});
|
||||
}
|
||||
|
||||
formData.questions.push(questionData);
|
||||
});
|
||||
|
||||
console.log(formData);
|
||||
|
||||
$.ajax({
|
||||
url: base_url + 'forms/edit_form',
|
||||
type: 'POST',
|
||||
data: { formData: JSON.stringify(formData) },
|
||||
success: function(response) {
|
||||
console.log('Form data updated successfully:', response);
|
||||
window.location.href = base_url + 'my_drafts';
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('Error updating form data:', error);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue