josephkurian
/
CodeIgniter_Gforms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed the add button

This commit is contained in:
jostheta 2024-07-24 13:05:03 +05:30
parent 90ab78cd8c
commit 9d29772dda
3 changed files with 84 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
application/views/forms/create.php
View File

@ -1,19 +1,22 @@
<div class="page_layout">
<br>
<div class="section">
<div class="reference-point"></div>
<div class="form_container">
<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-desc" class="form_container_top_desc" style="color: black;" placeholder="Form Description" required autofocus>
<input type="text" id="form-title" class="form_container_top_title" style="color: black;"
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>
<br>
<!-- New Questions will get added here -->
<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 -->
<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">
<div class="question-box_header_question-type">
<select id="question-type" class="question-box_header_question-type_select">
@ -41,8 +44,10 @@
<!-- These are the options -->
<div id="options-container">
<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">
<input id = "option-text" type="text" placeholder="Option1" class="question-box_option-block_option-text">
<img id="question-type-image" src="<?= base_url() ?>assets/images/circle.png"
alt="option circle" width="16px" height="16px">
<input id="option-text" type="text" placeholder="Option1"
class="question-box_option-block_option-text">
</div>
<br>
@ -56,30 +61,31 @@
</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>
<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>
<label class="checkbox-inline"> Required <input type="checkbox" class="required-checkbox"></label>
</div>
</div>
<br>
</div>
<div class="sidebar">
<button id="add-question" class="add-question-button">
<img src="<?= base_url() ?>assets/images/add.png" width="20px" height="20px" alt="add button">
<img src="<?= base_url() ?>assets/images/add.png" width="20px" height="20px" alt="add button">
</button>
</div>
</div>
<button id="submit-form" class="submit-button">Submit</button>
</div>
<!-- now we are trying the side bar -->
<!-- now we are trying the side bar -->
<!-- Include jQuery from a CDN -->
<!-- <script src="<?= base_url() ?>assets/js/jquery.js"></script> -->
<!-- Link to external script -->
<!-- <script src="<?= base_url() ?>assets/js/script.js"></script> -->
<!-- Include jQuery from a CDN -->
<!-- <script src="<?= base_url() ?>assets/js/jquery.js"></script> -->
<!-- Link to external script -->
<!-- <script src="<?= base_url() ?>assets/js/script.js"></script> -->

4
assets/css/style.css
View File

@ -18,7 +18,7 @@
display: flex;
flex-direction: column;
height: 100vh; /* Adjust 60px according to the height of your .form_header */
overflow-y: auto; /* Add scrollbars if content overflows vertically */
overflow-y: auto;/* Add scrollbars if content overflows vertically */
}
@ -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;
border-radius: 5px;
height: 50px;
margin-top:0px;
/* overflow-y: auto; */
}
.submit-button{
color: #fff;
background-color: #7349bd;

65
assets/js/script.js
View File

@ -21,7 +21,7 @@ $(document).ready(function() {
var newQuestion = $('#question-template').clone();
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_header_question').attr('placeholder', 'Question ' );
newQuestion.find('.question-box_option-block_option-text').attr('placeholder', 'Option 1');
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
setActiveQuestion(newQuestion);
//update sidebar
updateSidebarMarginTop();
});
// Add new option to a question
@ -67,8 +72,26 @@ $(document).ready(function() {
// Delete a question
$(document).on('click', '.delete-question', function() {
$(this).closest('.question-box').next('br').remove();
$(this).closest('.question-box').remove();
questionCount = questionCount - 1;
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
@ -123,22 +146,40 @@ $(document).ready(function() {
// Add active class to the clicked question box
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
$(document).on('click', '.question-box', function() {
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').click(function() {
var formData = {