diff --git a/assets/css/styles.css b/assets/css/styles.css
index e4ad48a..44b573a 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -1,8 +1,9 @@
+
+
body {
background-color: rgb(240, 235, 248);
font-family: Arial, sans-serif;
}
-
.container {
position: relative;
margin-top: 30px;
@@ -33,14 +34,13 @@ body {
#preview-btn {
margin-right: 10px;
background-color: rgb(103, 58, 183);
- border-color: rgb(103, 58, 183);
+ border-color: #007bff;
border-radius: 100%;
width: 33px;
height: 33px;
display: flex;
justify-content: center;
align-items: center;
- outline: none;
}
#preview-btn i {
@@ -53,10 +53,12 @@ body {
left: -60px;
top: 24px;
z-index: 1000;
- border-radius: 100%;
+ border-radius: 50%;
background-color: rgb(103, 58, 183);
+
}
+
.form-section {
background-color: white;
width: 56%;
@@ -134,47 +136,38 @@ body {
text-align: left;
}
+
.add-option-btn {
background-color: #f0f0f0;
color: #333;
margin-top: 11px;
font-size: 0.9em;
+
}
+
.ui-state-highlight {
- background: rgb(240, 235, 248) !important;
+ background-color: transparent !important;
+ border: none !important;
margin-bottom: 10px;
border-radius: 10px;
width: 56%;
margin-left: 240px;
- border: none !important;
}
-
-.btn-required {
- position: absolute;
- bottom: 10px;
- right: 10px;
- z-index: 100;
- border-radius: 20px;
-}
-
-/* Toggle button styles */
-.toggle-container {
- display: flex;
- align-items: center;
- margin-top: 20px;
-}
-
+/* Toggle Switch CSS */
+/* Toggle Switch CSS */
.toggle-switch {
position: relative;
display: inline-block;
- width: 36px;
- height: 20.4px;
+ width: 34px;
+ height: 20px;
margin-left: 10px;
}
.toggle-switch input {
- display: none;
+ opacity: 0;
+ width: 0;
+ height: 0;
}
.slider {
@@ -192,19 +185,19 @@ body {
.slider:before {
position: absolute;
content: "";
- height: 15.6px;
- width: 15.6px;
- left: 2.4px;
- bottom: 2.4px;
+ height: 14px;
+ width: 14px;
+ left: 3px;
+ bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
- background-color: #2196F3;
+ background-color: rgb(103, 58, 183);
}
input:checked + .slider:before {
- transform: translateX(15.6px);
+ transform: translateX(14px);
}
diff --git a/assets/js/scripts.js b/assets/js/scripts.js
index db26eb4..12d4d7e 100644
--- a/assets/js/scripts.js
+++ b/assets/js/scripts.js
@@ -2,6 +2,7 @@ $(document).ready(function() {
let index = 1;
let activeSection = null;
+ // Add option function
function addOption(type, container) {
let optionIndex = container.children().length + 1;
let optionHtml;
@@ -24,6 +25,7 @@ $(document).ready(function() {
container.append(optionHtml);
}
+ // Form section function
function createFormSection() {
let newSection = `
@@ -37,16 +39,13 @@ $(document).ready(function() {
+
-
- Required
-
-
`;
$('#form-container').append(newSection);
@@ -66,19 +65,11 @@ $(document).ready(function() {
left: position.left - buttonWidth - 47 + 'px',
top: position.top + activeSection.height() / 2 - buttonHeight / 2 + 'px'
});
- } else {
- let containerPosition = $('#form-container').position();
- let buttonWidth = $('#add-section-btn').outerWidth();
- let buttonHeight = $('#add-section-btn').outerHeight();
-
- $('#add-section-btn').css({
- position: 'absolute',
- left: containerPosition.left + 'px',
- top: containerPosition.top + $('#form-container').height() + 20 + 'px'
- });
}
}
+ // Event handler is triggered
+ // creates a new form section;sets it as active;repositions the add section button
$('#add-section-btn').on('click', function() {
createFormSection();
$('.form-section').removeClass('active');
@@ -87,6 +78,7 @@ $(document).ready(function() {
positionAddSectionButton();
});
+ // It updates the options container based on the selected type, adding the necessary input fields or buttons.
$(document).on('change', '.custom-select', function() {
let type = $(this).val();
let container = $(this).closest('.form-section').find('.options-container');
@@ -100,17 +92,21 @@ $(document).ready(function() {
container.append('');
} else {
addOption(type, container);
- $(this).closest('.form-section').append('');
+ $(this).closest('.form-section').append('');
}
});
+ // add option event handler
+ // adds a new option to the options container and updates the option numbers
$(document).on('click', '.add-option-btn', function() {
let type = $(this).closest('.form-section').find('.custom-select').val();
let container = $(this).closest('.form-section').find('.options-container');
addOption(type, container);
+ // refreshOptionNumbers(container);
});
- $(document).on('click','.delete-section-icon', function() {
+ // removes the section;updates the active section;repositions add section button
+ $(document).on('click', '.delete-section-icon', function() {
let section = $(this).closest('.form-section');
let prevSection = section.prev('.form-section');
let nextSection = section.next('.form-section');
@@ -129,19 +125,19 @@ $(document).ready(function() {
positionAddSectionButton();
});
+ // delete option
$(document).on('click', '.delete-option-icon', function() {
let option = $(this).closest('.option');
let container = option.closest('.options-container');
option.remove();
+K });
+
+ // Event handler for required toggle button
+ $(document).on('click', '.required-toggle', function() {
+ $(this).closest('.form-section').toggleClass('required');
});
- $(document).on('click', '.form-section', function() {
- $('.form-section').removeClass('active');
- $(this).addClass('active');
- activeSection = $(this);
- positionAddSectionButton();
- });
-
+ // Preview button functionality
$('#preview-btn').on('click', function() {
let previewWindow = window.open('', '_blank');
let previewContent = `
@@ -171,6 +167,7 @@ $(document).ready(function() {
previewContent += '';
let type = $(this).find('.custom-select').val();
let optionsContainer = $(this).find('.options-container');
+
if (type === 'multiple-choice') {
optionsContainer.find('.option').each(function() {
previewContent += `
@@ -204,7 +201,7 @@ $(document).ready(function() {
previewContent += '';
});
previewContent += `
-
+