fixed the add button
This commit is contained in:
parent
90ab78cd8c
commit
9d29772dda
|
@ -1,19 +1,22 @@
|
||||||
|
|
||||||
<div class="page_layout">
|
<div class="page_layout">
|
||||||
<br>
|
<br>
|
||||||
<div class="section">
|
<div class="section">
|
||||||
|
<div class="reference-point"></div>
|
||||||
<div class="form_container">
|
<div class="form_container">
|
||||||
<div class="form_container_top">
|
<div class="form_container_top">
|
||||||
<input type="text" id="form-title" class="form_container_top_title" style="color: black;" placeholder="Untitled Form" required autofocus>
|
<input type="text" id="form-title" class="form_container_top_title" style="color: black;"
|
||||||
<input type="text" id="form-desc" class="form_container_top_desc" style="color: black;" placeholder="Form Description" required autofocus>
|
placeholder="Untitled Form" required autofocus>
|
||||||
|
<input type="text" id="form-desc" class="form_container_top_desc" style="color: black;"
|
||||||
|
placeholder="Form Description" required autofocus>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<br>
|
|
||||||
<!-- New Questions will get added here -->
|
<!-- New Questions will get added here -->
|
||||||
<div class="question-box" id="question-template" style="display:none;" data-question-type="multiple-choice">
|
<div class="question-box" id="question-template" style="display:none;" data-question-type="multiple-choice">
|
||||||
<!-- This is the question-box header contains question, type, add an img -->
|
<!-- This is the question-box header contains question, type, add an img -->
|
||||||
<div class="question-box_header">
|
<div class="question-box_header">
|
||||||
<input type="text" id="" class="question-box_header_question" style="color: black;" placeholder="Question" required autofocus>
|
<input type="text" id="" class="question-box_header_question" style="color: black;"
|
||||||
|
placeholder="Question" required autofocus>
|
||||||
<img src="<?= base_url() ?>assets/images/image.png" alt="add an image" height="20px" width="20px">
|
<img src="<?= base_url() ?>assets/images/image.png" alt="add an image" height="20px" width="20px">
|
||||||
<div class="question-box_header_question-type">
|
<div class="question-box_header_question-type">
|
||||||
<select id="question-type" class="question-box_header_question-type_select">
|
<select id="question-type" class="question-box_header_question-type_select">
|
||||||
|
@ -41,8 +44,10 @@
|
||||||
<!-- These are the options -->
|
<!-- These are the options -->
|
||||||
<div id="options-container">
|
<div id="options-container">
|
||||||
<div class="question-box_option-block" id="option-template">
|
<div class="question-box_option-block" id="option-template">
|
||||||
<img id="question-type-image" src="<?= base_url() ?>assets/images/circle.png" alt="option circle" width="16px" height="16px">
|
<img id="question-type-image" src="<?= base_url() ?>assets/images/circle.png"
|
||||||
<input id = "option-text" type="text" placeholder="Option1" class="question-box_option-block_option-text">
|
alt="option circle" width="16px" height="16px">
|
||||||
|
<input id="option-text" type="text" placeholder="Option1"
|
||||||
|
class="question-box_option-block_option-text">
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
|
@ -56,12 +61,15 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="question-box_footer">
|
<div class="question-box_footer">
|
||||||
<button class="duplicate-question"><img src="<?= base_url() ?>assets/images/duplicate.png" width="24px" height="24px"></button>
|
<button class="duplicate-question"><img src="<?= base_url() ?>assets/images/duplicate.png"
|
||||||
<button class="delete-question"><img src="<?= base_url() ?>assets/images/trash.png" alt="delete question"></button>
|
width="24px" height="24px"></button>
|
||||||
|
<button class="delete-question"><img src="<?= base_url() ?>assets/images/trash.png"
|
||||||
|
alt="delete question"></button>
|
||||||
<label class="checkbox-inline"> Required <input type="checkbox" class="required-checkbox"></label>
|
<label class="checkbox-inline"> Required <input type="checkbox" class="required-checkbox"></label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sidebar">
|
<div class="sidebar">
|
||||||
|
@ -81,5 +89,3 @@
|
||||||
<!-- <script src="<?= base_url() ?>assets/js/jquery.js"></script> -->
|
<!-- <script src="<?= base_url() ?>assets/js/jquery.js"></script> -->
|
||||||
<!-- Link to external script -->
|
<!-- Link to external script -->
|
||||||
<!-- <script src="<?= base_url() ?>assets/js/script.js"></script> -->
|
<!-- <script src="<?= base_url() ?>assets/js/script.js"></script> -->
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -298,9 +298,11 @@ tr:nth-child(even) {
|
||||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
|
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
|
margin-top:0px;
|
||||||
/* overflow-y: auto; */
|
/* overflow-y: auto; */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.submit-button{
|
.submit-button{
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: #7349bd;
|
background-color: #7349bd;
|
||||||
|
|
|
@ -21,7 +21,7 @@ $(document).ready(function() {
|
||||||
var newQuestion = $('#question-template').clone();
|
var newQuestion = $('#question-template').clone();
|
||||||
newQuestion.removeAttr('id');
|
newQuestion.removeAttr('id');
|
||||||
newQuestion.attr('data-question-type', 'multiple-choice'); // Set default question type
|
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_header_question').attr('placeholder', 'Question ' );
|
||||||
newQuestion.find('.question-box_option-block_option-text').attr('placeholder', 'Option 1');
|
newQuestion.find('.question-box_option-block_option-text').attr('placeholder', 'Option 1');
|
||||||
newQuestion.show(); // Ensure the cloned template is visible
|
newQuestion.show(); // Ensure the cloned template is visible
|
||||||
|
|
||||||
|
@ -30,6 +30,11 @@ $(document).ready(function() {
|
||||||
|
|
||||||
// Scroll to the newly added question and set it as active
|
// Scroll to the newly added question and set it as active
|
||||||
setActiveQuestion(newQuestion);
|
setActiveQuestion(newQuestion);
|
||||||
|
|
||||||
|
//update sidebar
|
||||||
|
updateSidebarMarginTop();
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Add new option to a question
|
// Add new option to a question
|
||||||
|
@ -67,8 +72,26 @@ $(document).ready(function() {
|
||||||
|
|
||||||
// Delete a question
|
// Delete a question
|
||||||
$(document).on('click', '.delete-question', function() {
|
$(document).on('click', '.delete-question', function() {
|
||||||
$(this).closest('.question-box').next('br').remove();
|
questionCount = questionCount - 1;
|
||||||
$(this).closest('.question-box').remove();
|
var questionBox = $(this).closest('.question-box');
|
||||||
|
var prevQuestionBox = questionBox.prev('.question-box');
|
||||||
|
var nextQuestionBox = questionBox.next('.question-box');
|
||||||
|
|
||||||
|
questionBox.next('br').remove(); // Remove the adjacent <br> element
|
||||||
|
questionBox.remove(); // Remove the question box
|
||||||
|
|
||||||
|
if (nextQuestionBox.length) {
|
||||||
|
setActiveQuestion(nextQuestionBox);
|
||||||
|
} else if (prevQuestionBox.length) {
|
||||||
|
setActiveQuestion(prevQuestionBox);
|
||||||
|
} else {
|
||||||
|
// No questions left, align sidebar with form container top
|
||||||
|
setActiveQuestion($([])); // Pass an empty jQuery object
|
||||||
|
}
|
||||||
|
|
||||||
|
//update sidebar
|
||||||
|
updateSidebarMarginTop();
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Duplicate a question
|
// Duplicate a question
|
||||||
|
@ -123,22 +146,40 @@ $(document).ready(function() {
|
||||||
|
|
||||||
// Add active class to the clicked question box
|
// Add active class to the clicked question box
|
||||||
questionBox.addClass('active');
|
questionBox.addClass('active');
|
||||||
|
|
||||||
// Scroll the sidebar to the active question
|
|
||||||
|
|
||||||
// Move the sidebar beside the active question
|
|
||||||
sidebar.css({
|
|
||||||
position: 'absolute',
|
|
||||||
top: offset,
|
|
||||||
right: 0 // Align the sidebar to the right side of its container
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add click event listener to all question boxes to set active question
|
// Add click event listener to all question boxes to set active question
|
||||||
$(document).on('click', '.question-box', function() {
|
$(document).on('click', '.question-box', function() {
|
||||||
setActiveQuestion($(this));
|
setActiveQuestion($(this));
|
||||||
|
//update sidebar
|
||||||
|
updateSidebarMarginTop();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
//update Sidebar Margin
|
||||||
|
function updateSidebarMarginTop() {
|
||||||
|
var sidebar = $('.sidebar');
|
||||||
|
var questionCount = $('.question-box').length;
|
||||||
|
var referencePoint = $('.reference-point');
|
||||||
|
var activeQuestionBox = $('.question-box.active');
|
||||||
|
|
||||||
|
if (questionCount === 0) {
|
||||||
|
sidebar.css('margin-top', '0px');
|
||||||
|
} else if (questionCount === 1) {
|
||||||
|
sidebar.css('margin-top', '185px');
|
||||||
|
} else {
|
||||||
|
if (activeQuestionBox.length) {
|
||||||
|
// Calculate the offset of the active question from the reference point
|
||||||
|
var referenceOffsetTop = referencePoint.offset().top;
|
||||||
|
var activeBoxOffsetTop = activeQuestionBox.offset().top;
|
||||||
|
var offsetTop = activeBoxOffsetTop - referenceOffsetTop;
|
||||||
|
|
||||||
|
sidebar.css('margin-top', offsetTop + 'px');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Submit form
|
// Submit form
|
||||||
$('#submit-form').click(function() {
|
$('#submit-form').click(function() {
|
||||||
var formData = {
|
var formData = {
|
||||||
|
|
Loading…
Reference in New Issue