2701 lines
88 KiB
HTML
2701 lines
88 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Project-B</title>
|
|
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/png" sizes="56x56" href="assets/images/fav-icon/v.png">
|
|
<!-- bootstrap CSS -->
|
|
<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css" media="all" />
|
|
<!-- carousel CSS -->
|
|
<link rel="stylesheet" href="assets/css/owl.carousel.min.css" type="text/css" media="all"/>
|
|
<!-- nivo-slider CSS -->
|
|
<link rel="stylesheet" href="assets/css/nivo-slider.css" type="text/css" media="all" />
|
|
<!-- animate CSS -->
|
|
<link rel="stylesheet" href="assets/css/animate.css" type="text/css" media="all" />
|
|
<!-- animated-text CSS -->
|
|
<link rel="stylesheet" href="assets/css/animated-text.css" type="text/css" media="all" />
|
|
<!-- font-awesome CSS -->
|
|
<link rel="stylesheet" href="assets/css/all.min.css" type="text/css" media="all" />
|
|
<!-- font-flaticon CSS -->
|
|
<link rel="stylesheet" href="assets/css/flaticon.css" type="text/css" media="all" />
|
|
<!-- theme-default CSS -->
|
|
<link rel="stylesheet" href="assets/css/theme-default.css" type="text/css" media="all" />
|
|
<!-- meanmenu CSS -->
|
|
<link rel="stylesheet" href="assets/css/meanmenu.min.css" type="text/css" media="all" />
|
|
<link rel="stylesheet" href="assets/css/font-awesome.min.css" type="text/css" media="all" />
|
|
<!-- Main Style CSS -->
|
|
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
|
|
<!-- transitions CSS -->
|
|
<link rel="stylesheet" href="assets/css/owl.transitions.css" type="text/css" media="all" />
|
|
<!-- venobox CSS -->
|
|
<link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="all" />
|
|
<!-- widget CSS -->
|
|
<link rel="stylesheet" href="assets/css/widget.css" type="text/css" media="all" />
|
|
<!-- responsive CSS -->
|
|
<link rel="stylesheet" href="assets/css/responsive.css" type="text/css" media="all" />
|
|
<!-- quill css -->
|
|
<link rel="stylesheet" href="./node_modules/quill/dist/quill.snow.css" type="text/css" media="all" />
|
|
<!-- CortexJs MathLive JS and CSS -->
|
|
<link rel="stylesheet" href="./node_modules/mathlive/dist/mathlive-static.css" />
|
|
<script defer src="./node_modules/mathlive/dist/mathlive.min.js"></script>
|
|
<!-- modernizr js -->
|
|
<script src="assets/js/vendor/modernizr-3.5.0.min.js"></script>
|
|
|
|
<style>
|
|
|
|
ul, #myUL {
|
|
list-style-type: none;
|
|
}
|
|
|
|
#myUL {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.caret {
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.caret::before {
|
|
content: "\25B6";
|
|
color: black;
|
|
display: inline-block;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.caret-down::before {
|
|
-ms-transform: rotate(90deg); /* IE 9 */
|
|
-webkit-transform: rotate(90deg); /* Safari */
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.nested {
|
|
display: none;
|
|
}
|
|
|
|
.active {
|
|
display: block;
|
|
}
|
|
|
|
#myUL{
|
|
display: flex;
|
|
}
|
|
|
|
#myUL ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
|
|
#myUL li {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
#myUL a {
|
|
text-decoration: none;
|
|
color: #333;
|
|
}
|
|
|
|
#myUL a:hover {
|
|
color: #000;
|
|
}
|
|
|
|
.nested {
|
|
border-left: 2px dotted #000;
|
|
margin-left: 10px;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
.highlight {
|
|
border: 2px dashed blue; /* Change the border style as needed */
|
|
}
|
|
|
|
/* Initially hide the icon */
|
|
.drag-handle {
|
|
display: none;
|
|
}
|
|
|
|
/* Show the icon when hovering over the parent element with .hidedrag */
|
|
.hidedrag:hover .drag-handle {
|
|
display: block;
|
|
}
|
|
|
|
body {
|
|
background-image: url('assets/images/bg1-1.png');
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
[contentEditable=true]:empty:not(:focus):before {
|
|
content: attr(data-text)
|
|
}
|
|
|
|
.highlight {
|
|
background-color: rgb(230, 221, 235); /* Change to your preferred highlight color */
|
|
}
|
|
|
|
/* Define the transition for the animation */
|
|
.highlight {
|
|
transition: background-color 0.3s ease; /* Adjust the duration and easing as needed */
|
|
}
|
|
|
|
/* Style for the placeholder element with a slow animation */
|
|
.placeholder {
|
|
height: 20px; /* Adjust the height as needed to create the desired gap */
|
|
background-color: transparent; /* Set the background to transparent or match your layout */
|
|
transition: height 0.5s ease; /* Adjust the duration and easing for the gap animation */
|
|
}
|
|
|
|
math-field{
|
|
border-radius: 6px;
|
|
font-size:18px;
|
|
display: block;
|
|
color: #6d6d6d;
|
|
}
|
|
|
|
.buttons {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: -192px;
|
|
/* display: none; */
|
|
text-align: -webkit-right;
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
<style>
|
|
.arrow-down::before {
|
|
content: '\25BC';
|
|
margin-right: 5px;
|
|
}
|
|
.arrow-right::before {
|
|
content: '\25B6';
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.menu-symbol::before {
|
|
content: '\2630'; /* Unicode character for the menu symbol (☰) */
|
|
font-size: 24px; /* Adjust the font size as needed */
|
|
}
|
|
a{
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
/* Style for the main headings */
|
|
.main-heading {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Style for the collapsible content */
|
|
.content {
|
|
display: none;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.content.visible {
|
|
display: block;
|
|
}
|
|
.nested {
|
|
border-left: 2px dotted #000;
|
|
margin-left: 10px;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
|
|
#wrapper {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
#sidebar-wrapper {
|
|
min-height: 100vh;
|
|
width:300px;
|
|
margin-left: -15rem;
|
|
transition: margin 0.25s ease-out;
|
|
background-color: #ffffff8f!important;
|
|
position: relative;
|
|
overflow-y: auto;
|
|
border-radius: 40px;
|
|
}
|
|
|
|
#sidebar-wrapper .sidebar-heading {
|
|
padding: 0.875rem 1.25rem;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
#sidebar-wrapper .list-group {
|
|
width: 15rem;
|
|
}
|
|
#questionPaper{
|
|
position: fixed;
|
|
top: 151px;
|
|
left: 0;
|
|
overflow-y: auto;
|
|
overflow-x: scroll;
|
|
max-height: 532px;
|
|
padding:0 00 20px;
|
|
width: 235px;
|
|
height: -webkit-fill-available;
|
|
}
|
|
#page-content-wrapper {
|
|
min-width: 100%;
|
|
}
|
|
|
|
body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
|
|
margin-left: 0;
|
|
}
|
|
|
|
@media (min-width: 100px) {
|
|
#sidebar-wrapper {
|
|
margin-left: 0;
|
|
}
|
|
#page-content-wrapper {
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
|
|
margin-left: -19rem;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* Reset default margin and padding for body and the wrapper */
|
|
body, #wrapper {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Set the wrapper to flex layout */
|
|
#wrapper {
|
|
display: flex;
|
|
}
|
|
|
|
/* Style the sidebar */
|
|
|
|
.sidebar-content {
|
|
padding: 10px; /* Add padding to your content */
|
|
}
|
|
|
|
/* Style the main content area */
|
|
.main-content {
|
|
flex-grow: 1; /* Allow the main content to grow and fill the remaining space */
|
|
overflow-y: auto; /* Enable vertical scrolling for the main content */
|
|
}
|
|
.qP-style{
|
|
left:-220px!important;
|
|
}
|
|
|
|
/*navigation botton */
|
|
.menu-symbol {
|
|
background-color: transparent;
|
|
margin-top: 14px;
|
|
margin-right: -69%;
|
|
margin-left: -108px;
|
|
border: none;
|
|
border-radius: 50%; /* Make the button round */
|
|
width: 40px; /* Set the width and height of the button */
|
|
height: 40px;
|
|
transition: box-shadow 0.3s, background-color 0.3s; /* Add a smooth transition to the shadow and background-color */
|
|
}
|
|
|
|
.menu-symbol:hover {
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0); /* Add a transparent shadow on hover */
|
|
background-color: #e4d3f8b4;
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<!-- loder -->
|
|
<div class="loader-wrapper">
|
|
<div class="loader"></div>
|
|
<div class="loder-section left-section"></div>
|
|
<div class="loder-section right-section"></div>
|
|
</div>
|
|
|
|
|
|
<!-- main-header -->
|
|
<div class="main-header">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div id="sticky-header" class="nav-menu">
|
|
<button class="menu-symbol" id="sidebarToggle"></button>
|
|
|
|
<div class="header-logo">
|
|
<a href="dashboard.html" ><h2 style="margin-top: 25px;"><img src="assets/images/fav-icon/icon.png" alt=""> PROJECT-B</h2></a>
|
|
<a class="main_sticky" href="dashboard.html" class="project"><h2 style="margin-top: 25px;"><img src="assets/images/fav-icon/icon.png" alt=""> PROJECT-B</h2></a>
|
|
</div>
|
|
<div class="heder-menu">
|
|
<ul>
|
|
<li><a href="dashboard.html"><i class="fa fa-home" aria-hidden="true" style="font-size: 24px;"></i> Home</a></li>
|
|
<li><a href="#" class="myBtn" onclick="saveFile()" id="SaveButton"><i class="fa fa-floppy-o" aria-hidden="true" style="font-size: 20px;"></i> Save</a></li>
|
|
<li><a id="editpreview" href=""><i class="fa fa-eye" aria-hidden="true" style="font-size: 24px;"></i> Preview</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mobile-menu-area d-sm-block d-md-block d-lg-none ">
|
|
<div class="mobile-menu">
|
|
<nav class="itsoft_menu">
|
|
<ul class="nav_scroll">
|
|
<li><a href="dashboard.html"><i class="fa fa-home" aria-hidden="true" style="font-size: 24px;"></i> Home</a></li>
|
|
<li><a href="#" class="myBtn" onclick="saveFile()" id="SaveButton2"><i class="fa fa-floppy-o" aria-hidden="true" style="font-size: 20px;"></i> Save</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- QuestionPapper Container start -->
|
|
<div class="d-flex" id="wrapper">
|
|
<!-- Sidebar-->
|
|
<div class="border-end bg-white" id="sidebar-wrapper">
|
|
<div id="questionPaper"></div>
|
|
</div>
|
|
<!-- sidebar end -->
|
|
|
|
|
|
<div class="container" >
|
|
|
|
<div class="mainpanel"></div>
|
|
|
|
<!-- QuestionPapper Start -->
|
|
<div class="row section QuestionPaperClass" id="QuestionPaper">
|
|
|
|
<!-- QuestionPapper Title Start-->
|
|
|
|
<div class="question-papper-title element" style="border-top: solid; margin-bottom: 15px;">
|
|
<input type="hidden" id="QuestionPaper_UUID_ID">
|
|
<div class="col-lg-12 col-md-12">
|
|
<div class="row">
|
|
<div class="col-lg-12 col-md-12">
|
|
<div class="form_box" id="RTEID">
|
|
<label>Question Paper Title:</label>
|
|
<div class="richText" id="Question_title" contenteditable="true" style=" border: 2px solid #EEECFE; margin-top: 4px; color: black;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 col-md-12">
|
|
<div class="form_box">
|
|
<label>Description:</label>
|
|
<div class="richText" id="Question_description" contenteditable="true" style=" border: 2px solid #EEECFE; margin-top: 4px; color: black;"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Meta Datas -->
|
|
<div class="col-lg-3 col-md-3">
|
|
<div class="form_box">
|
|
<label>Max Marks:</label>
|
|
<input class="MetaData" id="Max_Marks" >
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3">
|
|
<div class="form_box">
|
|
<label>Course ID:</label>
|
|
<input class="MetaData" placeholder="" id="Course_ID" >
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3">
|
|
<div class="form_box">
|
|
<label>Course Code:</label>
|
|
<input class="MetaData" placeholder="" id="Course_Code">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3">
|
|
<div class="form_box">
|
|
<label>Subject ID:</label>
|
|
<input class="MetaData" placeholder="" id="Subject_ID">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3">
|
|
<div class="form_box">
|
|
<label>Subject Code:</label>
|
|
<input class="MetaData" placeholder="" id="Subject_Code" >
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3">
|
|
<div class="form_box">
|
|
<label>Paper No:</label>
|
|
<input class="MetaData" placeholder="" id="Paper_No" >
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3">
|
|
<div class="form_box">
|
|
<label>Subject Name:</label>
|
|
<input class="MetaData" placeholder="" id="Subject_Name">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3">
|
|
<div class="form_box">
|
|
<label>Sub Paper Prefix:</label>
|
|
<input class="MetaData" id="Sub_Paper_Prefix">
|
|
</div>
|
|
</div>
|
|
<!-- Meta Datas -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- QuestionPapper Title End-->
|
|
|
|
<!-- QuestionPallete start -->
|
|
<div class="question-pallete" id="question_pallete_id">
|
|
|
|
<!--Add new section area-->
|
|
<div id="addNewSection"></div>
|
|
|
|
</div>
|
|
<!-- QuestionPallete End -->
|
|
|
|
</div>
|
|
<!-- QuestionPapper End -->
|
|
|
|
</div>
|
|
<!-- QuestionPapper Container End -->
|
|
</div>
|
|
|
|
|
|
<div class="copy-right-area">
|
|
<div class="copy-left">
|
|
<span style="color: #533dfd;">© 2023 Project-B. All rights reserved.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- jquery js -->
|
|
<!-- <script src="assets/js/vendor/jquery-3.2.1.min.js"></script> -->
|
|
<script src="./node_modules/jquery/dist/jquery.min.js" onload="window.$ = window.jQuery = module.exports;"></script>
|
|
<!-- bootstrap js -->
|
|
<script src="assets/js/bootstrap.min.js"></script>
|
|
<!-- carousel js -->
|
|
<script src="assets/js/owl.carousel.min.js"></script>
|
|
<!-- counterup js -->
|
|
<script src="assets/js/jquery.counterup.min.js"></script>
|
|
<!-- waypoints js -->
|
|
<script src="assets/js/waypoints.min.js"></script>
|
|
<!-- wow js -->
|
|
<script src="assets/js/wow.js"></script>
|
|
<!-- imagesloaded js -->
|
|
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
|
|
<!-- venobox js -->
|
|
<script src="venobox/venobox.js"></script>
|
|
<!-- ajax mail js -->
|
|
<!-- <script src="assets/js/ajax-mail.js"></script> -->
|
|
<!-- animated-text js -->
|
|
<script src="assets/js/animated-text.js"></script>
|
|
<!-- venobox min js -->
|
|
<script src="venobox/venobox.min.js"></script>
|
|
<!-- isotope js -->
|
|
<script src="assets/js/isotope.pkgd.min.js"></script>
|
|
<!-- jquery nivo slider pack js -->
|
|
<script src="assets/js/jquery.nivo.slider.pack.js"></script>
|
|
<!-- jquery meanmenu js -->
|
|
<script src="assets/js/jquery.meanmenu.js"></script>
|
|
<script src="assets/js/popper.min.js"></script>
|
|
<!-- jquery scrollup js -->
|
|
<script src="assets/js/jquery.scrollUp.js"></script>
|
|
<!-- theme js -->
|
|
<script src="assets/js/theme.js"></script>
|
|
<script src="assets/js/jquery.barfiller.js"></script>
|
|
|
|
<!-- HTML TO JSON TO XML TO JSON TO HTML SCRIPTS -->
|
|
<script src="json2xml.js"></script>
|
|
<script src="html2json.js"></script>
|
|
<script src="xml2json.js"></script>
|
|
<script src="json2html.js"></script>
|
|
|
|
<!-- SAVE the QUESTIONPAPER to XML SCRIPT -->
|
|
<script src="savexml.js"></script>
|
|
<script src="html2json_for_navigation.js"></script>
|
|
|
|
<!-- RTC Hide and Show Script -->
|
|
<script src="rtc_hide_and_show.js"></script>
|
|
|
|
<script src="decode.js"></script>
|
|
|
|
|
|
<!-- nave pane -->
|
|
<script src="nav_pane.js"></script>
|
|
<script>
|
|
var sidebarWrapper = document.getElementById("questionPaper");
|
|
|
|
function clearSidebarWrapper() {
|
|
while (sidebarWrapper.firstChild) {
|
|
sidebarWrapper.removeChild(sidebarWrapper.firstChild);
|
|
}
|
|
}
|
|
</script>
|
|
<script>
|
|
|
|
const url = new URL(window.location.href);// Get the URL of the current page for JSON
|
|
const params = new URLSearchParams(url.search);// Create a URLSearchParams object from the query string
|
|
const FileName = params.get('filename');// Get the value of a specific parameter
|
|
|
|
|
|
$(document).ready(function() {
|
|
|
|
$('.ql-toolbar').hide(); // Hide the Quill Text Editor if PAge load
|
|
|
|
if(FileName == "" || FileName == null ) {
|
|
var random_no = Date.now();
|
|
addSection(false, false, random_no, false, false, false, false); //Call the Default section on the QUestion paper
|
|
}else {
|
|
loadXML(FileName); //send filename to read xml files to using this function
|
|
}
|
|
|
|
})
|
|
|
|
|
|
$(document).on("click", function (event) {
|
|
|
|
var questionPaperDiv = $(".QuestionPaperClass");
|
|
if (!questionPaperDiv.is(event.target) && questionPaperDiv.has(event.target).length === 0) {
|
|
$('.ql-toolbar').hide();
|
|
}
|
|
|
|
});
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const scrollToTopBtn = document.getElementById('SaveButton');
|
|
const scrollToTopBtn2 = document.getElementById('SaveButton2');
|
|
require('dotenv').config();
|
|
const isEncrypted = process.env.ENCRYPTED;
|
|
|
|
// Function to keep the cursor at its current position
|
|
function keepCursorAtPosition(event) {
|
|
event.preventDefault(); // Prevent the default button click behavior
|
|
}
|
|
|
|
// Add a click event listener to the button
|
|
scrollToTopBtn.addEventListener('click', keepCursorAtPosition);
|
|
scrollToTopBtn2.addEventListener('click', keepCursorAtPosition);
|
|
});
|
|
|
|
|
|
//EditPreview
|
|
document.getElementById("editpreview").href = "QuestionPreview.html?filename=" + FileName;
|
|
|
|
// Function to load XML from a file
|
|
function loadXML(xmlFileName) {
|
|
return new Promise((resolve, reject) => {
|
|
fs.readFile('xml/'+xmlFileName, 'utf8', (error, data) => {
|
|
if (error) {
|
|
reject(error);
|
|
} else {
|
|
if (isEncrypted === 'YES') {
|
|
// decrypt function call
|
|
var decodeData = decode(data);
|
|
resolve(decodeData);
|
|
xml2json(decodeData);
|
|
} else {
|
|
resolve(data)
|
|
xml2json(data)
|
|
}
|
|
// json2nav();
|
|
// clearSidebarWrapper();
|
|
// navpane();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Function for Save the XML File
|
|
function saveFile() {
|
|
|
|
html2json();
|
|
json2xml();
|
|
|
|
if(FileName == "" || FileName == null ){
|
|
setTimeout(promptBox, 1000);
|
|
|
|
}else{
|
|
|
|
const newFileName = FileName.split(".")[0];
|
|
savexml(newFileName);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
<script>
|
|
|
|
const { v4: uuidv4 } = require('uuid');
|
|
const Quill = require('quill');
|
|
|
|
const Question_Paper_UUID = uuidv4();
|
|
var QuestionPaper_UUID = document.getElementById('QuestionPaper_UUID_ID')
|
|
QuestionPaper_UUID.value = Question_Paper_UUID;
|
|
|
|
|
|
var toolbarOptions = [
|
|
['bold', 'italic', 'underline', 'strike'],
|
|
[{ 'script': 'sub'}, { 'script': 'super' }],
|
|
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
|
|
['image'],
|
|
];
|
|
|
|
var toolbarOptions2 = [
|
|
['bold', 'italic', 'underline'],
|
|
[{ 'script': 'sub'}, { 'script': 'super' }],
|
|
['image'],
|
|
];
|
|
|
|
var quill = new Quill('#Question_title', {
|
|
theme: 'snow',
|
|
modules: {
|
|
toolbar: toolbarOptions
|
|
},
|
|
});
|
|
|
|
var quill = new Quill('#Question_description', {
|
|
theme: 'snow',
|
|
modules: {
|
|
toolbar: toolbarOptions,
|
|
clipboard: {
|
|
matchVisual: true,
|
|
}
|
|
},
|
|
});
|
|
|
|
var Question_title_Div = $("#Question_title");
|
|
var Question_title_previousDiv = Question_title_Div.prev();
|
|
Question_title_previousDiv.attr("id", "Question_title_rtc");
|
|
var setitem = 'Question_title_rtc';
|
|
$('#Question_title').click(function() {
|
|
|
|
rtc_hide_and_show(setitem);
|
|
|
|
});
|
|
|
|
var Question_description_Div = $("#Question_description");
|
|
var Question_description_previousDiv = Question_description_Div.prev();
|
|
Question_description_previousDiv.attr("id", "Question_description_rtc");
|
|
var questionDescriptionRtc = 'Question_description_rtc';
|
|
$('#Question_description').click(function() {
|
|
|
|
rtc_hide_and_show(questionDescriptionRtc);
|
|
|
|
});
|
|
|
|
|
|
var inputElement2 = document.getElementById('Question_title');
|
|
inputElement2.addEventListener("keyup", function(event) {
|
|
|
|
json2nav();
|
|
clearSidebarWrapper();
|
|
navpane();
|
|
|
|
});
|
|
json2nav();
|
|
clearSidebarWrapper();
|
|
navpane();
|
|
html2json();
|
|
|
|
|
|
function showButtons(container) {
|
|
const buttons = container.querySelector('.buttons');
|
|
const onhover = container.querySelector('.onhover');
|
|
if(buttons && onhover)
|
|
{
|
|
onhover.style.display = 'block';
|
|
}
|
|
buttons.style.display = 'block';
|
|
|
|
}
|
|
|
|
function hideButtons(container) {
|
|
const buttons = container.querySelector('.buttons');
|
|
const onhover = container.querySelector('.onhover');
|
|
buttons.style.display = 'none';
|
|
onhover.style.display = 'none';
|
|
|
|
}
|
|
|
|
|
|
var i = 0;
|
|
//Function for Create a New Section in the Question Paper
|
|
function addSection(title = false, description = false, random_no = false, section_uuid = false, section_marks = false, sectionDispalyMarks = false, sectionAttemptAny = false)
|
|
{
|
|
const Section_UUID = uuidv4();
|
|
var addsection = "";
|
|
const text_field_created_time = Date.now();
|
|
// Initialize i with 0
|
|
|
|
var sectionRandomID = "";
|
|
if(random_no)
|
|
{
|
|
sectionRandomID = random_no;
|
|
}
|
|
else
|
|
{
|
|
sectionRandomID = text_field_created_time;
|
|
}
|
|
|
|
|
|
localStorage.setItem('sectionId', sectionRandomID);
|
|
|
|
i = i + 1;
|
|
addsection +=
|
|
`
|
|
<div class="section-heading">
|
|
<i class="fa fa-angle-down float-left" id="collapseSection_${random_no == false ? text_field_created_time : random_no}" aria-hidden="true"></i>
|
|
<!-- Add a space character here -->
|
|
Section:${i}
|
|
</div>
|
|
<input type="hidden" id="Section_UUID_ID_${random_no == false ? text_field_created_time : random_no}" value="${section_uuid == false ? Section_UUID : section_uuid}">
|
|
<div class="section restrict-drop" id="section_${sectionRandomID}" >
|
|
<div class="sectionTitle" id="section_title_${random_no == false ? text_field_created_time : random_no}">
|
|
<div class="nodrop col-lg-12 col-md-12">
|
|
<div class="row question element" style="border-top : 15px solid; margin-right: ;" id="SectionBox_${sectionRandomID}" onmouseover="showButtons(this)" >
|
|
|
|
<div class="row" style="text-align:right; width: 100%">
|
|
<div class="col-lg-10 col-md-12">
|
|
<div class=" button-group align-items-center">
|
|
<div class="addButton buttons" style="display: none;" id="sectionAddButton_${sectionRandomID}">
|
|
<div class="col-md-2">
|
|
<i title="TextQuestion" class="fa fa-text-width" aria-hidden="true" onclick="addNewQuestions(event, 1)" id="sidetextButton_${sectionRandomID}"></i>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<i title="ChoiceQuestion"class="fa fa-check-circle-o" aria-hidden="true" onclick="addNewQuestions(event, 2)" id="sidechoiseButton_${sectionRandomID}"></i>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<i title="QuestionGroup" class="fa fa-th-list" aria-hidden="true" onclick="addNewGroupQuestions(event, 0)" id="sidegroupQuestionButton_${sectionRandomID}"></i>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<i title="Section" class="fa fa-columns" aria-hidden="true" onclick="addSection()" id="sidesectionButton_${sectionRandomID}"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-12 col-md-12">
|
|
<div class="form_box">
|
|
<label>Section:</label>
|
|
<div class="richText" id="section_title_text_${random_no == false ? text_field_created_time : random_no}" contenteditable="true" style="border: 2px solid #EEECFE; margin-top: 4px;">${title ? title : ''}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-12 col-md-12">
|
|
<div class="form_box">
|
|
<label>Description:</label>
|
|
<div class="richText" id="section_description_text_${random_no == false ? text_field_created_time : random_no}" contenteditable="true" style="border: 2px solid #EEECFE; margin-top: 4px;">${title ? description : ''}</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<span>Display Marks</span>
|
|
<label class="switch">
|
|
<input type="checkbox" id="Section_Display_Marks_Id_${sectionRandomID}" checked>
|
|
<span class="slider round"></span>
|
|
</label>
|
|
|
|
<div class="col-lg-0 col-md-0"></div>
|
|
<div class="col-lg-4 col-md-4 hideondrag text" style="margin-left:215px;" >
|
|
<div class="form_box">
|
|
<div style="margin-left: 35px"> Attempt Any : </div>
|
|
<input type="text" id="Section_Attempt_Any_Id_${sectionRandomID}" value="${sectionAttemptAny !== false ? sectionAttemptAny : 0}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-8 col-md-8"></div>
|
|
<div class="col-lg-4 col-md-4 hideondrag text">
|
|
<div class="form_box" style="margin-top: -58px;">
|
|
<div style="margin-left: 80px"> Marks : </div>
|
|
<input type="text" id="Section_Marks_Id_${sectionRandomID}" value="${section_marks !== false ? section_marks : "0"}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="section-question-area" id="question_area_${sectionRandomID}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" style="text-align:right; width: 100%">
|
|
<div class="col-lg-10 col-md-12">
|
|
<div class="button-group align-items-center">
|
|
<div class="form-button addButton">
|
|
<button type="submit" id="addNewButton_${sectionRandomID}">+Add New</button>
|
|
<button type="submit" style="display: none;" onclick="addNewQuestions(event, 1)" id="textButton_${sectionRandomID}">Text</button>
|
|
<button type="submit" style="display: none;" onclick="addNewQuestions(event, 2)" id="choiseButton_${sectionRandomID}">Choice</button>
|
|
<button type="submit" style="display: none;" onclick="addSection()" id="sectionButton_${sectionRandomID}">Section</button>
|
|
<button type="submit" style="display: none;" onclick="addNewGroupQuestions(event, 0)" id="groupQuestionButton_${sectionRandomID}">Question Group</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
var formContainer = document.getElementById('addNewSection');
|
|
formContainer.insertAdjacentHTML('beforeend', addsection);
|
|
|
|
var addNewButtonId = 'addNewButton_' + sectionRandomID;
|
|
var SectionButtonId = 'sectionButton_' + sectionRandomID;
|
|
var textButtonId = 'textButton_' + sectionRandomID;
|
|
var ChoiseButtonId = 'choiseButton_' + sectionRandomID;
|
|
var sideChoiseButtonId = 'sidechoiseButton_' + sectionRandomID;
|
|
var groupQuestionButtonId = 'groupQuestionButton_' + sectionRandomID;
|
|
|
|
|
|
|
|
$('#'+addNewButtonId).on('click', function() {
|
|
|
|
$('#'+SectionButtonId).toggle();
|
|
$('#'+textButtonId).toggle();
|
|
$('#'+ChoiseButtonId).toggle();
|
|
$('#'+groupQuestionButtonId).toggle();
|
|
})
|
|
|
|
$(textButtonId).on('click', function()
|
|
{
|
|
$('#'+SectionButtonId).hide();
|
|
$('#'+textButtonId).hide();
|
|
$('#'+ChoiseButtonId).hide();
|
|
$('#'+groupQuestionButtonId).hide();
|
|
});
|
|
$(ChoiseButtonId).on('click', function()
|
|
{
|
|
$('#'+SectionButtonId).hide();
|
|
$('#'+textButtonId).hide();
|
|
$('#'+ChoiseButtonId).hide();
|
|
$('#'+groupQuestionButtonId).hide();
|
|
});
|
|
$('#'+SectionButtonId).on('click', function()
|
|
{
|
|
$('#'+SectionButtonId).hide();
|
|
$('#'+textButtonId).hide();
|
|
$('#'+ChoiseButtonId).hide();
|
|
$('#'+groupQuestionButtonId).hide();
|
|
});
|
|
$('#'+groupQuestionButtonId).on('click', function()
|
|
{
|
|
$('#'+SectionButtonId).hide();
|
|
$('#'+textButtonId).hide();
|
|
$('#'+ChoiseButtonId).hide();
|
|
$('#'+groupQuestionButtonId).hide();
|
|
});
|
|
|
|
$(document).on("click", function (event) {
|
|
|
|
var questionPaperDiv = $(".QuestionPaperClass");
|
|
if (!questionPaperDiv.is(event.target) && questionPaperDiv.has(event.target).length === 0) {
|
|
$('#'+SectionButtonId).hide();
|
|
$('#'+textButtonId).hide();
|
|
$('#'+ChoiseButtonId).hide();
|
|
$('#'+groupQuestionButtonId).hide();
|
|
}
|
|
|
|
});
|
|
|
|
|
|
var section = 'SectionBox_'+sectionRandomID;
|
|
var sectionAddButton = 'sectionAddButton_'+sectionRandomID;
|
|
$('#'+section).mouseenter(function(){
|
|
|
|
add_button_hide_and_show(sectionAddButton);
|
|
|
|
})
|
|
$('#'+sectionAddButton).hide();
|
|
|
|
|
|
|
|
var collapseSectionId = (random_no == false) ? 'collapseSection_' + text_field_created_time : 'collapseSection_' + random_no;
|
|
var contentId = (random_no == false) ? 'question_area_' + text_field_created_time : 'question_area_' + random_no;
|
|
var sessionTitleId = (random_no == false) ? 'section_title_' + text_field_created_time : 'section_title_' + random_no;
|
|
|
|
var collapseSection = document.getElementById(collapseSectionId);
|
|
var content = document.getElementById(contentId);
|
|
var sessionTitle = document.getElementById(sessionTitleId);
|
|
var addNewButtonId = 'addNewButton_' + (random_no == false ? text_field_created_time : random_no);
|
|
var addNewButton = document.getElementById(addNewButtonId);
|
|
|
|
$(document).ready(function () {
|
|
$('#' + collapseSectionId).on('click', function () {
|
|
if (content.style.display === 'none' || content.style.display === '') {
|
|
content.style.display = 'block';
|
|
sessionTitle.style.display = 'block';
|
|
addNewButton.style.display = 'block';
|
|
$(this).removeClass('fa-angle-up').addClass('fa-angle-down');
|
|
} else {
|
|
content.style.display = 'none';
|
|
sessionTitle.style.display = 'none';
|
|
addNewButton.style.display = 'none';
|
|
$(this).removeClass('fa-angle-down').addClass('fa-angle-up');
|
|
}
|
|
});
|
|
});
|
|
|
|
var sectionText = (random_no == false) ? 'section_title_text_' + text_field_created_time : 'section_title_text_' + random_no;
|
|
var quill = new Quill('#'+sectionText, {
|
|
theme: 'snow',
|
|
modules: {
|
|
toolbar: toolbarOptions
|
|
},
|
|
|
|
});
|
|
|
|
var sectionDescription = (random_no == false) ? 'section_description_text_' + text_field_created_time : 'section_description_text_' + random_no;
|
|
var quill = new Quill('#'+sectionDescription, {
|
|
theme: 'snow',
|
|
modules: {
|
|
toolbar: toolbarOptions
|
|
},
|
|
});
|
|
|
|
var section_title_Div = (random_no == false) ? 'section_title_text_' + text_field_created_time : 'section_title_text_' + random_no;
|
|
var NewRTEId = (random_no == false) ? 'section_title_rtc_' + text_field_created_time : 'section_title_rtc_' + random_no;
|
|
var section_title_previousDiv = $('#'+section_title_Div).prev();
|
|
section_title_previousDiv.attr("id", NewRTEId);
|
|
$('#'+section_title_Div).click(function() {
|
|
|
|
rtc_hide_and_show(NewRTEId);
|
|
|
|
});
|
|
|
|
var section_description_Div = (random_no == false) ? 'section_description_text_' + text_field_created_time : 'section_description_text_' + random_no;
|
|
var NewRTEId2 = (random_no == false) ? 'section_description_rtc_' + text_field_created_time : 'section_description_rtc_' + random_no;
|
|
var section_description_previousDiv = $('#'+section_description_Div).prev();
|
|
section_description_previousDiv.attr("id", NewRTEId2);
|
|
$('#'+section_description_Div).click(function() {
|
|
|
|
rtc_hide_and_show(NewRTEId2);
|
|
|
|
});
|
|
|
|
$(section_description_previousDiv).hide();
|
|
$(section_title_previousDiv).hide();
|
|
|
|
|
|
var sectionID = 'section_title_text_' + sectionRandomID;
|
|
var inputElement = document.getElementById(sectionID);
|
|
|
|
inputElement.addEventListener("keyup", function(event) {
|
|
|
|
json2nav();
|
|
clearSidebarWrapper();
|
|
navpane();
|
|
|
|
});
|
|
|
|
var DisplayMark_RawID = 'Section_Display_Marks_Id_' + sectionRandomID
|
|
var DisplayMark_ID = document.getElementById(DisplayMark_RawID)
|
|
|
|
if(sectionDispalyMarks === 'true'){
|
|
|
|
DisplayMark_ID.checked = true;
|
|
}else{
|
|
DisplayMark_ID.checked = false;
|
|
}
|
|
|
|
|
|
// var Section_Attempt_Any_raw_Id = 'Section_Attempt_Any_Id_' + sectionRandomID;
|
|
// var Section_Attempt_Any_Id = document.getElementById(Section_Attempt_Any_raw_Id)
|
|
|
|
// var Section_Marks_raw_Id = 'Section_Marks_Id_' + sectionRandomID;
|
|
// var Section_Marks_Id = document.getElementById(Section_Marks_raw_Id)
|
|
|
|
// console.log(Section_Marks_Id);
|
|
|
|
// $(Section_Attempt_Any_Id).keyup(function() {
|
|
// var inputValue = $(this).val();
|
|
|
|
// if(inputValue == "")
|
|
// {
|
|
|
|
// $(Section_Marks_Id).prop("disabled", true);
|
|
// }
|
|
// else{
|
|
|
|
// $(Section_Marks_Id).prop("disabled", false);
|
|
|
|
// }
|
|
|
|
// });
|
|
|
|
json2nav();
|
|
clearSidebarWrapper();
|
|
navpane();
|
|
|
|
|
|
}
|
|
|
|
//Function for Create a New Question Group
|
|
function addQuestionGroup(idObj)
|
|
{
|
|
const QuestionGroup_UUID = uuidv4();
|
|
|
|
//set default values
|
|
var question_group_id = false; // set default value false. this param for add question group inside section (i.e) question area id
|
|
var add_question_group_id = false // set default value false. this param for add new question group inside another question group (i.e) group question area id
|
|
//end of set default values
|
|
|
|
//set values from obj param if exists
|
|
if(idObj.hasOwnProperty('question_group_id'))
|
|
{
|
|
question_group_id = idObj.question_group_id;
|
|
}
|
|
else if(idObj.hasOwnProperty('add_question_group_id'))
|
|
{
|
|
question_group_id = idObj.add_question_group_id;
|
|
}
|
|
|
|
//end of set values from obj param if exists
|
|
|
|
var addQuestionGroup = "";
|
|
const text_field_created_time = Date.now();
|
|
|
|
var QuestionGroup_ID = "";
|
|
if(idObj.hasOwnProperty('questions_randon_id'))
|
|
{
|
|
QuestionGroup_ID = idObj.questions_randon_id;
|
|
}
|
|
else
|
|
{
|
|
QuestionGroup_ID = text_field_created_time;
|
|
}
|
|
|
|
localStorage.setItem('QuestionGroupId', QuestionGroup_ID)
|
|
|
|
var sectionRandomID = localStorage.getItem('sectionId');
|
|
|
|
addQuestionGroup +=
|
|
`<div draggable='true' class="draggable-group hidedrag" id="draggedGroup_${QuestionGroup_ID}">
|
|
<i id="collapseSubSection_${QuestionGroup_ID}" aria-hidden="true" style=" font-size: 24px; margin-right: 9px; margin-top: 25px;"></i>
|
|
<input type="hidden" id="Question_Group_UUID_ID_${QuestionGroup_ID}" value="${idObj.hasOwnProperty('question_group_obj') ? idObj.question_group_obj.attributes.Id : QuestionGroup_UUID}">
|
|
<div class="groupsection" draggable='true' id="group_question_${QuestionGroup_ID}">
|
|
<div class="sectionTitle" id="group_question_title_${QuestionGroup_ID}">
|
|
|
|
<div class="col-lg-12 col-md-12">
|
|
|
|
<div onmouseover="showButtons(this)" id="QuestionGroupButtons_${QuestionGroup_ID}" class="row question element" style="border-top: 10px solid #a658f3; border-radius:10px; margin-top:5px;">
|
|
|
|
<div class="row" style="text-align:right; width: 100%">
|
|
<div class="col-lg-10 col-md-12">
|
|
<div class=" button-group align-items-center">
|
|
<div class="addButton buttons" style="display: none;" id="AddButton_${QuestionGroup_ID}">
|
|
<div class="col-md-2">
|
|
<i class="fa fa-text-width" aria-hidden="true" onclick="addNewGroupQuestions(event, 1)" id="textButtonSectionQroupside_${QuestionGroup_ID}" title="Question Group Text Question"></i>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<i class="fa fa-check-circle-o" aria-hidden="true" onclick="addNewGroupQuestions(event, 2)" id="choiseButtonSectionQroupside_${QuestionGroup_ID}" title="Question Group Choice Question"></i>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<i class="fa fa-th-list" aria-hidden="true" onclick="MultiLevelQuestionGroup(event)" id="QuestionGroupButtonside_${QuestionGroup_ID}" title="Question Group on Question Group"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="dragHandle" class="drag-handle">
|
|
<i class="fas fa-grip-horizontal"></i>
|
|
</div>
|
|
<div class="col-lg-12 col-md-12">
|
|
<div class="form_box">
|
|
<label>Quesions Group:</label>
|
|
<div class="richText" id="subSection_title_text_${QuestionGroup_ID}" contenteditable="true" style=" border: 2px solid #EEECFE; margin-top: 4px;">${idObj.hasOwnProperty('question_group_obj') ? idObj.question_group_obj.group_title : ""}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-12 col-md-12 hideondrag">
|
|
<div class="form_box">
|
|
<label>Quesions Group Description:</label>
|
|
<div class="richText" id="subSection_description_text_${QuestionGroup_ID}" contenteditable="true" style=" border: 2px solid #EEECFE; margin-top: 4px;">${idObj.hasOwnProperty('question_group_obj') ? idObj.question_group_obj.group_description : ""}</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<span>Display Marks</span>
|
|
<label class="switch">
|
|
<input type="checkbox" id="Question_Group_Display_Marks_Id_${QuestionGroup_ID}" checked>
|
|
<span class="slider round"></span>
|
|
</label>
|
|
|
|
<div class="col-lg-0 col-md-0"></div>
|
|
<div class="col-lg-4 col-md-4 hideondrag text" style="margin-left:215px;">
|
|
<div class="form_box">
|
|
<div style="margin-left: 35px;"> Attempt Any : </div>
|
|
<input type="text" id="Question_Attempt_Any_Id_${QuestionGroup_ID}" value="${idObj.hasOwnProperty('question_group_obj') ? idObj.question_group_obj.group_attempt_any : 0}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-8 col-md-8"></div>
|
|
<div class="col-lg-4 col-md-4 hideondrag text">
|
|
<div class="form_box" style="margin-top: -55px;">
|
|
<div style="margin-left: 80px;"> Marks : </div>
|
|
<input type="text" id="Question_Group_Marks_Id_${QuestionGroup_ID}" value="${idObj.hasOwnProperty('question_group_obj') ? idObj.question_group_obj.group_marks : "0"}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="">
|
|
<div class="nested-sortable" id="group_question_area_${QuestionGroup_ID}"></div>
|
|
</div>
|
|
<div class="row " >
|
|
<div class="col-lg-8 col-md-12">
|
|
<div class="button-group align-items-center">
|
|
<div class="form-button addButton">
|
|
<button type="submit" id="addNewButtonSectionQroup_${QuestionGroup_ID}">Insert Question</button>
|
|
<button type="submit" style="display: none;" onclick="addNewGroupQuestions(event, 1)" id="textButtonSectionQroup_${QuestionGroup_ID}">Text</button>
|
|
<button type="submit" style="display: none;" onclick="addNewGroupQuestions(event, 2)" id="choiseButtonSectionQroup_${QuestionGroup_ID}">Choice</button>
|
|
<button type="submit" style="display: none;" onclick="MultiLevelQuestionGroup(event)" id="QuestionGroupButton_${QuestionGroup_ID}">Question Group</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
if(question_group_id)
|
|
{
|
|
var formContainer = document.getElementById(question_group_id);
|
|
formContainer.insertAdjacentHTML('beforeend', addQuestionGroup);
|
|
}
|
|
else if(idObj.hasOwnProperty('section_question_area_id'))
|
|
{
|
|
var formContainer = document.getElementById(idObj.section_question_area_id);
|
|
formContainer.insertAdjacentHTML('beforeend', addQuestionGroup);
|
|
}
|
|
else if(add_question_group_id)
|
|
{
|
|
var formContainer = document.getElementById(add_question_group_id);
|
|
formContainer.insertAdjacentHTML('beforeend', addQuestionGroup);
|
|
}
|
|
|
|
var addNewButtonId = 'addNewButtonSectionQroup_' + QuestionGroup_ID ;
|
|
var textButtonId = 'textButtonSectionQroup_' + QuestionGroup_ID ;
|
|
var ChoiseButtonId = 'choiseButtonSectionQroup_' + QuestionGroup_ID ;
|
|
var GroupQuestionButtonId = 'QuestionGroupButton_' + QuestionGroup_ID ;
|
|
|
|
$('#'+addNewButtonId).on('click', function() {
|
|
|
|
$('#'+textButtonId).toggle();
|
|
$('#'+ChoiseButtonId).toggle();
|
|
$('#'+GroupQuestionButtonId).toggle();
|
|
})
|
|
|
|
$('#'+textButtonId).on('click', function()
|
|
{
|
|
$('#'+textButtonId).hide();
|
|
$('#'+ChoiseButtonId).hide();
|
|
$('#'+GroupQuestionButtonId).hide();
|
|
});
|
|
$('#'+ChoiseButtonId).on('click', function()
|
|
{
|
|
$('#'+textButtonId).hide();
|
|
$('#'+ChoiseButtonId).hide();
|
|
$('#'+GroupQuestionButtonId).hide();
|
|
});
|
|
$('#'+GroupQuestionButtonId).on('click', function()
|
|
{
|
|
$('#'+textButtonId).hide();
|
|
$('#'+ChoiseButtonId).hide();
|
|
$('#'+GroupQuestionButtonId).hide();
|
|
});
|
|
|
|
|
|
var groupQuestion = 'draggedGroup_'+QuestionGroup_ID;
|
|
$('#'+groupQuestion).click(function(){
|
|
|
|
// alert('draggedGroup_');
|
|
|
|
})
|
|
|
|
var removeAndCloneTextQuestion_Raw = 'QuestionGroupButtons_'+QuestionGroup_ID;
|
|
var AddButtons_Raw = 'AddButton_'+QuestionGroup_ID;
|
|
$('#'+removeAndCloneTextQuestion_Raw).mouseenter(function(){
|
|
|
|
add_button_hide_and_show(AddButtons_Raw);
|
|
|
|
})
|
|
$('#'+AddButtons_Raw).hide();
|
|
|
|
|
|
|
|
var subSectionText = 'subSection_title_text_' + QuestionGroup_ID;
|
|
var quill = new Quill('#'+subSectionText, {
|
|
theme: 'snow', // Choose a theme (snow, bubble, etc.)
|
|
modules: {
|
|
toolbar: toolbarOptions
|
|
},
|
|
});
|
|
|
|
var subSectionDescription = 'subSection_description_text_' + QuestionGroup_ID;
|
|
var quill = new Quill('#'+subSectionDescription, {
|
|
theme: 'snow', // Choose a theme (snow, bubble, etc.)
|
|
modules: {
|
|
toolbar: toolbarOptions
|
|
},
|
|
});
|
|
|
|
|
|
|
|
var sub_section_title_Div = 'subSection_title_text_' + QuestionGroup_ID ;
|
|
var NewRTEId = 'subsection_title_rtc_' + QuestionGroup_ID;
|
|
var sub_section_title_previousDiv = $('#'+sub_section_title_Div).prev();
|
|
sub_section_title_previousDiv.attr("id", NewRTEId);
|
|
$('#'+sub_section_title_Div).click(function() {
|
|
|
|
rtc_hide_and_show(NewRTEId)
|
|
|
|
});
|
|
|
|
|
|
var sub_section_description_Div = 'subSection_description_text_' + QuestionGroup_ID;
|
|
var NewRTEId2 = 'subsection_description_rtc_' + QuestionGroup_ID;
|
|
var sub_section_description_previousDiv = $('#'+sub_section_description_Div).prev();
|
|
sub_section_description_previousDiv.attr("id", NewRTEId2);
|
|
$('#'+sub_section_description_Div).click(function() {
|
|
|
|
rtc_hide_and_show(NewRTEId2)
|
|
|
|
});
|
|
$(sub_section_description_previousDiv).hide();
|
|
$(sub_section_title_previousDiv).hide();
|
|
|
|
var displayMArks = ""
|
|
if(idObj.hasOwnProperty('question_group_obj'))
|
|
{
|
|
displayMArks = idObj.question_group_obj.group_display_marks;
|
|
}
|
|
else
|
|
{
|
|
displayMArks = 'false';
|
|
}
|
|
|
|
|
|
var DisplayMark_RawID = "Question_Group_Display_Marks_Id_" + QuestionGroup_ID;
|
|
var DisplayMark_ID = document.getElementById(DisplayMark_RawID)
|
|
|
|
if(displayMArks === 'true'){
|
|
|
|
DisplayMark_ID.checked = true;
|
|
}else{
|
|
DisplayMark_ID.checked = false;
|
|
}
|
|
|
|
|
|
|
|
var question_groupid = 'subSection_title_text_'+ QuestionGroup_ID;
|
|
var inputElement = document.getElementById(question_groupid);
|
|
inputElement.addEventListener("keyup", function(event) {
|
|
|
|
json2nav();
|
|
clearSidebarWrapper();
|
|
navpane();
|
|
|
|
});
|
|
|
|
json2nav();
|
|
clearSidebarWrapper();
|
|
navpane();
|
|
|
|
}
|
|
|
|
//Function for Create a New Choice Question in the Section and Question Group
|
|
function groupQuestion( question_id = false, section_id = false , group_question_area_id = false, questionTitle = false, questionDescription = false, questionSubType = false, mathEnabled = false, Choice = false, questionAreaId = false, questionGroupId = false, questionRandomNo = false, QuestionGroupRandomNo = false, questionMarks = false, questionUUID = false, group_question_marks = false, group_question_uuid = false, questionDisplayMarks = false, group_question_Display_Marks = false)
|
|
{
|
|
|
|
console.log('===========================================================================================================================================')
|
|
console.log('choice question-----', "group_question_area_id : "+group_question_area_id, 'questionGroupId : '+ questionGroupId, 'questionAreaId : '+questionAreaId)
|
|
console.log('===========================================================================================================================================')
|
|
|
|
|
|
const ChoiceGroupFixed_UUID = uuidv4();
|
|
|
|
var groupQuestion = "";
|
|
const text_field_created_time = Date.now();// random number for dynamic ID - using current date time
|
|
|
|
var addChoiceAreaId = "";
|
|
if(questionRandomNo)
|
|
{
|
|
addChoiceAreaId = questionRandomNo;
|
|
}
|
|
else if(QuestionGroupRandomNo)
|
|
{
|
|
addChoiceAreaId = QuestionGroupRandomNo;
|
|
}
|
|
else
|
|
{
|
|
addChoiceAreaId = text_field_created_time;
|
|
}
|
|
|
|
localStorage.setItem('ChoiceId', addChoiceAreaId)
|
|
localStorage.setItem('mathEnabled', mathEnabled);
|
|
|
|
var marks = ""
|
|
if(questionMarks)
|
|
{
|
|
marks = questionMarks;
|
|
}
|
|
else if(group_question_marks)
|
|
{
|
|
marks = group_question_marks;
|
|
}
|
|
else
|
|
{
|
|
marks = 0;
|
|
}
|
|
|
|
var UUID = "";
|
|
if(questionUUID)
|
|
{
|
|
UUID = questionUUID;
|
|
}
|
|
else if(group_question_marks)
|
|
{
|
|
UUID = group_question_uuid;
|
|
}
|
|
else
|
|
{
|
|
const ChoiceQuestion_UUID = uuidv4();
|
|
UUID = ChoiceQuestion_UUID;
|
|
}
|
|
|
|
var sectionRandomID = localStorage.getItem('sectionId');
|
|
|
|
var QuestionGroup_ID = localStorage.getItem('QuestionGroupId');
|
|
|
|
|
|
groupQuestion +=
|
|
`<div class="question hidedrag element Question-Border-Top col-lg-12" draggable="true" id="removeAndCloneQroupQuestion_${addChoiceAreaId}" style="border-top: solid; margin-bottom: 15px; margin-top: -25px;" onclick="toggleClasses(this)" onmouseover="showButtons(this)">
|
|
<div id="dragHandle" class="drag-handle">
|
|
<i class="fas fa-grip-horizontal"></i>
|
|
</div>
|
|
<div class="items hideondrag" style="display: none;">
|
|
<i class="fa fa-trash-o" onclick="removeClonedQroupQuestion(${addChoiceAreaId})" style="font-size:20px;"aria-hidden="true"></i>
|
|
<i class="fa fa-clone" id="cloneId_${addChoiceAreaId}" onclick="cloneQuestion(event, 2)" style="font-size:20px;" aria-hidden="true"></i>
|
|
</div>
|
|
|
|
|
|
<div class="row" style="text-align:right; width: 100%" id="overallAddButtons_${addChoiceAreaId}">
|
|
<div class="col-lg-10 col-md-12">
|
|
<div class=" button-group align-items-center">
|
|
<div class="addButton buttons" style="display: none;" id="AddButtons_${addChoiceAreaId}">
|
|
<div class="col-md-2">
|
|
<i class="fa fa-text-width" aria-hidden="true" onclick="addNewQuestions(event, 1)" id="sidetextButton_${sectionRandomID}"></i>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<i class="fa fa-check-circle-o" aria-hidden="true" onclick="addNewQuestions(event, 2)" id="sidechoiseButton_${sectionRandomID}"></i>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<i class="fa fa-th-list" aria-hidden="true" onclick="addNewGroupQuestions(event, 0)" id="sidegroupQuestionButton_${sectionRandomID}"></i>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<i class="fa fa-columns" aria-hidden="true" onclick="addSection()" id="sidesectionButton_${sectionRandomID}"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" style="text-align:right; width: 100%;" id="overallQuestionGRoupAddButtons_${addChoiceAreaId}">
|
|
<div class="col-lg-10 col-md-12">
|
|
<div class=" button-group align-items-center">
|
|
<div class="addButton buttons onhover" style="display: none;" id="QuestionGRoupAddButtons_${addChoiceAreaId}">
|
|
<div class="col-md-2">
|
|
<i class="fa fa-text-width" aria-hidden="true" onclick="addNewGroupQuestions(event, 1)" id="textButtonSectionQroupside_${QuestionGroup_ID}" title="Question Group Text Question"></i>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<i class="fa fa-check-circle-o" aria-hidden="true" onclick="addNewGroupQuestions(event, 2)" id="choiseButtonSectionQroupside_${QuestionGroup_ID}" title="Question Group Choice Question"></i>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<i class="fa fa-th-list" aria-hidden="true" onclick="MultiLevelQuestionGroup(event)" id="QuestionGroupButtonside_${QuestionGroup_ID}" title="Question Group on Question Group"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-12 col-md-12">
|
|
<input type="hidden" id="Choice_Question_UUID_ID_${addChoiceAreaId}" value="${UUID}">
|
|
<div class="row">
|
|
<div class="col-lg-12 col-md-12">
|
|
<div class="form_box">
|
|
<label>Question:</label>
|
|
<div class="richText" id="textQuestionName_${addChoiceAreaId}" contenteditable="true" style=" border: 2px solid #EEECFE; margin-top: 4px;">${questionTitle ? questionTitle : ''}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-12 col-md-12 hideondrag" style="margin-bottom: 50px">
|
|
<div class="form_box">
|
|
<label>Subtitle:</label>
|
|
<div class="richText" id="textQuestionSubtitle_${addChoiceAreaId}" contenteditable="true" style=" border: 2px solid #EEECFE; margin-top: 4px;">${questionDescription ? questionDescription : ''}</div>
|
|
<math-field id="textQuestionSubtitle_math_${addChoiceAreaId}" contenteditable="true">${mathEnabled == 'true' ? questionDescription : ''}</math-field>
|
|
</div>
|
|
</div>
|
|
|
|
<input type="hidden" id="Choice_Group_Fixed_UUID_ID_${addChoiceAreaId}" value="${Choice == false ? ChoiceGroupFixed_UUID : Choice[0].id}">
|
|
<div class="col-lg-12 col-md-4 hideondrag" id="newChoiceGroup_${addChoiceAreaId}">
|
|
<div class="choice row align-items-center" id="deleteChoice_${addChoiceAreaId}">
|
|
<div class="col-lg-0"><input type="radio" id="radioButton_${addChoiceAreaId}" checked></div>
|
|
<div class="col-lg-6">
|
|
<div class="richText" id="choiceTextField_${addChoiceAreaId}" contenteditable="true" style=" border: 2px solid #EEECFE; width: 100%; margin-top: 10px;">${Choice ? Choice[0].choice_name : ""}</div>
|
|
<math-field id="choiceTextField_math_${addChoiceAreaId}" style="width: 100%;" contenteditable="true">${Choice ? Choice[0].choice_name : ""}</math-field>
|
|
</div>
|
|
<div class="items2 col-lg-4">
|
|
<i class="fa fa-commenting-o" style="font-size:20px;" aria-hidden="true" id="commentButton_${addChoiceAreaId}"></i>
|
|
<i class="fa fa-trash-o" style="font-size:20px;" aria-hidden="true" id="deleteButton_${addChoiceAreaId}"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form_box" id="comment_delete_${addChoiceAreaId}">
|
|
<input type="text" class="comment" id="commentField_${addChoiceAreaId}" placeholder="Message for those who choose this" style="margin-left: 60px; width: 353px; margin-bottom: 30px; display: none;" value="${Choice ? Choice[0].choice_description : ""}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-12 col-md-12 hideondrag" >
|
|
<div id="addChoiceArea_`+addChoiceAreaId+`" class="row"></div>
|
|
</div>
|
|
<div class="col-lg-9 col-md-4 hideondrag" style="margin-left:70px;">
|
|
<i class="fa fa-plus" aria-hidden="true" id="addChoiceButton_${addChoiceAreaId}" onclick="ConstructAddNewChoiceID(event)"></i>
|
|
</div>
|
|
|
|
<div class="col-lg-8 col-md-8"></div>
|
|
<div class="col-lg-4 col-md-4 hideondrag text">
|
|
<div class="form_box">
|
|
<div style="margin-left: 80px;"> Marks : </div>
|
|
<input type="text" placeholder="" id="Choice_Question_Marks_Id_${addChoiceAreaId}" value="${marks}"></input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="type1-switch align-items-center hideondrag" style="display: none;">
|
|
<input type="hidden" value="group" id="question_type_${addChoiceAreaId}">
|
|
|
|
<span>Display Marks</span>
|
|
<label class="switch">
|
|
<input type="checkbox" id="Choice_Question_Display_Marks_Id_${addChoiceAreaId}" checked>
|
|
<span class="slider round"></span>
|
|
</label>
|
|
|
|
<span>Math</span>
|
|
<label class="switch">
|
|
<input type="checkbox" id="math_${addChoiceAreaId}">
|
|
<span class="slider round"></span>
|
|
</label>
|
|
|
|
|
|
<span>Multiple Answer</span>
|
|
<label class="switch hideondrag" >
|
|
<input type="checkbox" id="multipleAnswer_${addChoiceAreaId}">
|
|
<span class="slider round"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div></div>`;
|
|
|
|
if(question_id && !section_id)
|
|
{
|
|
|
|
var questionDiv = document.getElementById(question_id);
|
|
questionDiv.insertAdjacentHTML('afterend', groupQuestion);
|
|
}
|
|
else if(section_id)
|
|
{
|
|
|
|
var sectionDiv = document.getElementById(section_id);
|
|
sectionDiv.insertAdjacentHTML('beforeend', groupQuestion);
|
|
|
|
}
|
|
else if(questionGroupId)
|
|
{
|
|
|
|
var sectionDiv = document.getElementById(questionGroupId);
|
|
sectionDiv.insertAdjacentHTML('beforeend', textQuestion);
|
|
|
|
}
|
|
else if(questionAreaId)
|
|
{
|
|
|
|
var sectionDiv = document.getElementById(questionAreaId);
|
|
sectionDiv.insertAdjacentHTML('beforeend', groupQuestion);
|
|
|
|
}
|
|
else if(group_question_area_id)
|
|
{
|
|
|
|
var sectionDiv = document.getElementById(group_question_area_id);
|
|
sectionDiv.insertAdjacentHTML('beforeend', groupQuestion);
|
|
}
|
|
|
|
|
|
var commentButtonId = 'commentButton_' + addChoiceAreaId;
|
|
var commentFieldId = 'commentField_' + addChoiceAreaId;
|
|
var imageButtonId = 'imageButton_' + addChoiceAreaId;
|
|
var imageInputId = 'imageInput_' + addChoiceAreaId;
|
|
var deleteButtonId = 'deleteButton_' + addChoiceAreaId;
|
|
var deleteChoiceId = 'deleteChoice_' + addChoiceAreaId;
|
|
|
|
|
|
var ChoiceMathSwitch = 'math_'+addChoiceAreaId;
|
|
var textQuestionSubtitle_math = 'textQuestionSubtitle_math_'+addChoiceAreaId;
|
|
var textQuestionSubtitle = 'textQuestionSubtitle_'+addChoiceAreaId;
|
|
var choiceTextField_math = 'choiceTextField_math_'+addChoiceAreaId;
|
|
var choiceTextField = 'choiceTextField_'+addChoiceAreaId;
|
|
var choicecommentFielddelete = 'newChoiceGroup_'+addChoiceAreaId;
|
|
|
|
var ChoiceMathSwitchId = document.getElementById(ChoiceMathSwitch);
|
|
var textQuestionSubtitle_mathId = document.getElementById(textQuestionSubtitle_math)
|
|
var textQuestionSubtitleId = document.getElementById(textQuestionSubtitle)
|
|
var choiceTextField_math_Id = document.getElementById(choiceTextField_math)
|
|
var choiceTextFieldId = document.getElementById(choiceTextField)
|
|
var choicecommentFielddeleteId = document.getElementById(choicecommentFielddelete)
|
|
|
|
console.log(ChoiceMathSwitchId);
|
|
console.log(ChoiceMathSwitch);
|
|
if (mathEnabled === 'true')
|
|
{
|
|
|
|
ChoiceMathSwitchId.checked = true;
|
|
$(textQuestionSubtitleId).hide();
|
|
$(textQuestionSubtitle_previousDiv).hide();
|
|
$(textQuestionSubtitle_mathId).show();
|
|
$(choiceTextFieldId).hide();
|
|
$(choiceTextField_previousDiv).hide();
|
|
$(choiceTextField_math_Id).show();
|
|
|
|
}
|
|
else
|
|
{
|
|
|
|
$(ChoiceMathSwitchId).checked = false;
|
|
$(textQuestionSubtitleId).show();
|
|
$(textQuestionSubtitle_mathId).hide();
|
|
$(choiceTextFieldId).show();
|
|
$(choiceTextField_math_Id).hide();
|
|
}
|
|
|
|
|
|
|
|
$(ChoiceMathSwitchId).change(function() {
|
|
|
|
if (ChoiceMathSwitchId.checked) {
|
|
$(textQuestionSubtitle_mathId).show();
|
|
$(textQuestionSubtitleId).hide();
|
|
$(textQuestionSubtitle_previousDiv).hide();
|
|
$(choiceTextFieldId).hide();
|
|
$(choiceTextField_previousDiv).hide();
|
|
$(choiceTextField_math_Id).show();
|
|
} else {
|
|
$(textQuestionSubtitleId).show();
|
|
$(textQuestionSubtitle_mathId).hide();
|
|
$(choiceTextFieldId).show();
|
|
$(choiceTextField_math_Id).hide();
|
|
}
|
|
});
|
|
|
|
|
|
|
|
if(Choice)
|
|
{
|
|
if(Choice[0].choice_description !== 'undefined' && Choice[0].choice_description !== '' && Choice[0].choice_description !== 'null' && Choice[0].choice_description !== 'false')
|
|
{
|
|
|
|
$('#'+commentFieldId).css('display', 'block');
|
|
|
|
}else {
|
|
|
|
$('#'+commentFieldId).css('display', 'none');
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
$('#'+commentButtonId).on('click', function() {
|
|
|
|
$('#'+commentFieldId).toggle();
|
|
|
|
})
|
|
|
|
$('#'+imageButtonId).on('click', function() {
|
|
|
|
$('#'+imageInputId).click();
|
|
|
|
})
|
|
$('#'+deleteButtonId).on('click', function() {
|
|
|
|
$('#'+choicecommentFielddelete).remove();
|
|
})
|
|
|
|
|
|
|
|
|
|
var AddButtons_Raw = 'AddButtons_'+addChoiceAreaId;
|
|
var overallAddButtons_Raw = 'overallAddButtons_'+addChoiceAreaId;
|
|
var QuestionGroupAddButtons_Raw = 'QuestionGRoupAddButtons_'+addChoiceAreaId;
|
|
var overallQuestionGroupAddButtons_Raw = 'overallQuestionGRoupAddButtons_'+addChoiceAreaId;
|
|
|
|
var AddButtons_ID = document.getElementById(AddButtons_Raw)
|
|
var QuestionGroupAddButtons_ID = document.getElementById(QuestionGroupAddButtons_Raw)
|
|
var removeAndCloneTextQuestion_ID = document.getElementById(removeAndCloneTextQuestion_Raw);
|
|
|
|
//for hide and the side button
|
|
var id = questionAreaId;
|
|
console.log(typeof(id));
|
|
|
|
|
|
var questiongrouparea = "";
|
|
if(id !== false)
|
|
{
|
|
questiongrouparea = id.split("_")[0];
|
|
}
|
|
else
|
|
{
|
|
var questiongrouparea = 'false';
|
|
}
|
|
console.log(questiongrouparea);
|
|
|
|
if(group_question_area_id !== false)
|
|
{
|
|
// alert('true')
|
|
$('#'+overallQuestionGroupAddButtons_Raw).show();
|
|
$('#'+overallAddButtons_Raw).hide();
|
|
|
|
}
|
|
else{
|
|
|
|
// alert('false')
|
|
if(questiongrouparea === 'group')
|
|
{
|
|
$('#'+overallQuestionGroupAddButtons_Raw).show();
|
|
$('#'+overallAddButtons_Raw).hide();
|
|
}
|
|
else
|
|
{
|
|
$('#'+overallQuestionGroupAddButtons_Raw).hide();
|
|
$('#'+overallAddButtons_Raw).show();
|
|
}
|
|
|
|
}
|
|
|
|
|
|
var removeAndCloneTextQuestion_Raw = 'removeAndCloneQroupQuestion_'+addChoiceAreaId;
|
|
var AddButtons_Raw = 'AddButtons_'+addChoiceAreaId;
|
|
$('#'+removeAndCloneTextQuestion_Raw).mouseenter(function(){
|
|
|
|
if(group_question_area_id !== false)
|
|
{
|
|
add_button_hide_and_show(QuestionGroupAddButtons_Raw);
|
|
}
|
|
else
|
|
{
|
|
if(questiongrouparea === 'group')
|
|
{
|
|
add_button_hide_and_show(QuestionGroupAddButtons_Raw);
|
|
}
|
|
else
|
|
{
|
|
add_button_hide_and_show(AddButtons_Raw);
|
|
}
|
|
}
|
|
|
|
})
|
|
$('#'+AddButtons_Raw).hide();
|
|
$('#'+QuestionGroupAddButtons_Raw).hide();
|
|
|
|
|
|
|
|
|
|
var removeAndCloneTextQuestion_Raw = 'removeAndCloneQroupQuestion_'+addChoiceAreaId;
|
|
var removeAndCloneTextQuestion_ID = document.getElementById(removeAndCloneTextQuestion_Raw);
|
|
|
|
|
|
// $(removeAndCloneTextQuestion_ID).click(function(){
|
|
|
|
// // alert('choice');
|
|
|
|
// })
|
|
|
|
|
|
var typetwoQuestionName = 'textQuestionName_' + addChoiceAreaId;
|
|
|
|
|
|
var quill = new Quill('#'+typetwoQuestionName, {
|
|
theme: 'snow',
|
|
modules: {
|
|
toolbar: toolbarOptions
|
|
},
|
|
});
|
|
|
|
var typetwoQuestionSubtitle = 'textQuestionSubtitle_' + addChoiceAreaId;
|
|
var quill = new Quill('#'+typetwoQuestionSubtitle, {
|
|
theme: 'snow',
|
|
modules: {
|
|
toolbar: toolbarOptions
|
|
},
|
|
});
|
|
|
|
var choiceTextField = 'choiceTextField_' + addChoiceAreaId;
|
|
var quill = new Quill('#'+choiceTextField, {
|
|
theme: 'snow',
|
|
modules: {
|
|
toolbar: toolbarOptions2
|
|
},
|
|
placeholder: 'Enter Choice',
|
|
});
|
|
|
|
var textQuestionName_Div = 'textQuestionName_' + addChoiceAreaId;
|
|
var textQuestionNewRTEId = 'typeTwotextQuestionName_rtc_' + addChoiceAreaId;
|
|
var textQuestionName_previousDiv = $('#'+textQuestionName_Div).prev();
|
|
textQuestionName_previousDiv.attr("id", textQuestionNewRTEId);
|
|
$('#'+textQuestionName_Div).click(function() {
|
|
|
|
rtc_hide_and_show(textQuestionNewRTEId);
|
|
|
|
});
|
|
|
|
|
|
var textQuestionSubtitle_Div = 'textQuestionSubtitle_' + addChoiceAreaId;
|
|
var textQuestionSubtitleNewRTEId = 'typeTwotextQuestionSubtitle_rtc_' + addChoiceAreaId;
|
|
var textQuestionSubtitle_previousDiv = $('#'+textQuestionSubtitle_Div).prev();
|
|
textQuestionSubtitle_previousDiv.attr("id", textQuestionSubtitleNewRTEId);
|
|
$('#'+textQuestionSubtitle_Div).click(function() {
|
|
|
|
rtc_hide_and_show(textQuestionSubtitleNewRTEId);
|
|
|
|
});
|
|
|
|
var choiceTextField_Div = 'choiceTextField_' + addChoiceAreaId;
|
|
var choiceTextNewRTEId = 'choiceTextField_rtc_' + addChoiceAreaId;
|
|
var choiceTextField_previousDiv = $('#'+choiceTextField_Div).prev();
|
|
choiceTextField_previousDiv.attr("id", choiceTextNewRTEId);
|
|
$('#'+choiceTextField_Div).click(function() {
|
|
|
|
rtc_hide_and_show(choiceTextNewRTEId);
|
|
|
|
});
|
|
$(textQuestionName_previousDiv).hide();
|
|
$(textQuestionSubtitle_previousDiv).hide();
|
|
$(choiceTextField_previousDiv).hide();
|
|
|
|
|
|
var DisplayMark_RawID = "Choice_Question_Display_Marks_Id_" + addChoiceAreaId;
|
|
var DisplayMark_ID = document.getElementById(DisplayMark_RawID)
|
|
|
|
if(questionDisplayMarks === 'true'){
|
|
|
|
DisplayMark_ID.checked = true;
|
|
}else if(group_question_Display_Marks === 'true'){
|
|
DisplayMark_ID.checked = true;
|
|
}else{
|
|
DisplayMark_ID.checked = false;
|
|
}
|
|
|
|
|
|
var choiceid = 'textQuestionName_'+ addChoiceAreaId;
|
|
var inputElement = document.getElementById(choiceid);
|
|
$(inputElement).keyup(function(event) {
|
|
|
|
json2nav();
|
|
clearSidebarWrapper();
|
|
navpane();
|
|
|
|
});
|
|
|
|
json2nav();
|
|
clearSidebarWrapper();
|
|
navpane();
|
|
}
|
|
|
|
//Function for Create a New Choice Field in a Choice Question
|
|
function addNewChoice(NewaddChoiceAreaId = false , choiceName = false, choiceDescription = false, questionRandomNo = false, QuestionGroupRandomNo = false, choiceID = false, mathEnabled= false)
|
|
{
|
|
|
|
const Choice_Group_Dynamic_UUID = uuidv4();
|
|
|
|
addChoice = "";
|
|
const text_field_created_time = Date.now();
|
|
var rnd_no = Math.random();
|
|
|
|
addChoice +=
|
|
`<div class="col-lg-12 col-md-4" id="newChoiceGroup_`+text_field_created_time+rnd_no+`">
|
|
<input type="hidden" id="Choice_Group_Dynamic_UUID_ID_`+text_field_created_time+rnd_no+`" value="${choiceID == false ? Choice_Group_Dynamic_UUID : choiceID}">
|
|
<div class="choice row align-items-center" id="newDeleteChoice_`+text_field_created_time+rnd_no+`">
|
|
<div class="col-lg-0"><input type="radio" id="newChoiceRadioButton_`+text_field_created_time+rnd_no+`" checked ></div>
|
|
<div class="col-lg-6">
|
|
<div class="richText" id="newChoiceTextField_`+text_field_created_time+rnd_no+`" contenteditable="true" style=" border: 2px solid #EEECFE; width: 100%; margin-top: 10px;">${choiceName ? choiceName : ""}</div>
|
|
<math-field id="newchoiceTextField_math_`+text_field_created_time+rnd_no+`" style="width: 100%;" contenteditable="true">${choiceName ? choiceName : ""}</math-field>
|
|
</div>
|
|
<div class="items2 col-lg-4" >
|
|
<i class="fa fa-commenting-o" style="font-size:20px;" aria-hidden="true" id="newChoiceCommentButton_`+text_field_created_time+rnd_no+`"></i>
|
|
<i class="fa fa-trash-o" style="font-size:20px;" aria-hidden="true" id="newChoiceDeleteButton_`+text_field_created_time+rnd_no+`"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form_box" id="delete_`+text_field_created_time+rnd_no+`" style="">
|
|
<input type="text" class="comment" id="newChoiceCommentField_`+text_field_created_time+rnd_no+`" placeholder="Message for those who choose this" style="margin-left: 60px; width: 353px; margin-bottom: 30px; display: none;" value = "${choiceDescription ? choiceDescription : ""}">
|
|
</div>
|
|
</div>`
|
|
|
|
if(questionRandomNo)
|
|
{
|
|
var addChoiceAreaId = 'addChoiceArea_'+questionRandomNo;
|
|
var addChoiceAreaId2 = document.getElementById(addChoiceAreaId);
|
|
addChoiceAreaId2.insertAdjacentHTML('beforeend', addChoice);
|
|
}
|
|
else if(QuestionGroupRandomNo)
|
|
{
|
|
var addChoiceAreaRandomNo = 'addChoiceArea_'+QuestionGroupRandomNo;
|
|
var addChoiceAreaId = document.getElementById(addChoiceAreaRandomNo);
|
|
addChoiceAreaId.insertAdjacentHTML('beforeend', addChoice);
|
|
}
|
|
else if(NewaddChoiceAreaId)
|
|
{
|
|
NewaddChoiceAreaId.insertAdjacentHTML('beforeend', addChoice);
|
|
}
|
|
|
|
|
|
var newChoiceCommentButtonId = document.getElementById('newChoiceCommentButton_'+text_field_created_time+rnd_no);
|
|
var newChoiceCommentFieldId = document.getElementById('newChoiceCommentField_'+text_field_created_time+rnd_no);
|
|
var newChoiceCommentFieldDeleteId = document.getElementById('newChoiceGroup_'+text_field_created_time+rnd_no);
|
|
var newChoiceDeleteButtonId = document.getElementById('newChoiceDeleteButton_'+text_field_created_time+rnd_no);
|
|
var newDeleteChoiceId = document.getElementById('newDeleteChoice_'+text_field_created_time+rnd_no);
|
|
|
|
var formbox = document.getElementById('delete_'+text_field_created_time+rnd_no);
|
|
|
|
|
|
var choiceid = localStorage.getItem('ChoiceId');
|
|
var ChoiceMathSwitch = 'math_'+choiceid;
|
|
|
|
var ChoiceMathSwitchId = document.getElementById(ChoiceMathSwitch)
|
|
var newchoiceTextField_math_Id = document.getElementById('newchoiceTextField_math_'+text_field_created_time+rnd_no);
|
|
var newchoiceTextFieldId = document.getElementById('newChoiceTextField_'+text_field_created_time+rnd_no);
|
|
|
|
|
|
$(newchoiceTextField_math_Id).hide();
|
|
ChoiceMathSwitchId.addEventListener("change", function() {
|
|
|
|
if (ChoiceMathSwitchId.checked) {
|
|
|
|
$(newchoiceTextFieldId).hide();
|
|
$(newchoiceTextField_math_Id).show();
|
|
|
|
} else {
|
|
|
|
$(newchoiceTextFieldId).show();
|
|
$(newchoiceTextField_math_Id).hide();
|
|
}
|
|
});
|
|
|
|
if (ChoiceMathSwitchId.checked) {
|
|
|
|
$(newchoiceTextFieldId).hide();
|
|
$(newchoiceTextField_math_Id).show();
|
|
|
|
} else {
|
|
|
|
$(newchoiceTextFieldId).show();
|
|
$(newchoiceTextField_math_Id).hide();
|
|
}
|
|
|
|
|
|
|
|
$(newChoiceCommentButtonId).on('click', function() {
|
|
|
|
$(newChoiceCommentFieldId).toggle();
|
|
|
|
})
|
|
|
|
$(newChoiceDeleteButtonId).on('click', function() {
|
|
|
|
$(newChoiceCommentFieldDeleteId).remove();
|
|
})
|
|
|
|
if(choiceDescription !== 'undefined' && choiceDescription !== '' && choiceDescription !== null && choiceDescription !== false){
|
|
|
|
$(newChoiceCommentFieldId).css('display', 'block');
|
|
|
|
|
|
}else {
|
|
|
|
$(newChoiceCommentFieldId).css('display', 'none');
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var newChoiceTextField = document.getElementById('newChoiceTextField_'+text_field_created_time+rnd_no);
|
|
var quill = new Quill(newChoiceTextField, {
|
|
theme: 'snow',
|
|
modules: {
|
|
toolbar: toolbarOptions2
|
|
},
|
|
placeholder: 'Enter Choice',
|
|
});
|
|
|
|
|
|
var newchoiceFieldId = 'newChoiceTextField_'+text_field_created_time+rnd_no;
|
|
var newchoiceTextField_Div = document.getElementById(newchoiceFieldId);
|
|
var newchoiceTextField_previousDiv = $(newchoiceTextField_Div).prev();
|
|
var newChoiceTextNewRTEId = "newChoiceTextField_rtc_"+text_field_created_time+rnd_no;
|
|
newchoiceTextField_previousDiv.attr("id", newChoiceTextNewRTEId);
|
|
|
|
|
|
newchoiceTextField_Div.addEventListener('click', function() {
|
|
|
|
var id = localStorage.getItem('rtc');
|
|
var hideid = document.getElementById(id);
|
|
// console.log('hide id :' + hideid)
|
|
$(hideid).hide();
|
|
$(newchoiceTextField_previousDiv).show();
|
|
// console.log('show id :'+newchoiceTextField_previousDiv)
|
|
localStorage.setItem('rtc',newChoiceTextNewRTEId);
|
|
|
|
});
|
|
$(newchoiceTextField_previousDiv).hide();
|
|
|
|
json2nav();
|
|
clearSidebarWrapper();
|
|
navpane();
|
|
}
|
|
|
|
//Function for Create a New Text Question in the Section and Question Group
|
|
function textQuestion(question_id = false, section_id = false, group_question_area_id = false, questionTitle = false, questionDescription = false, questionSubType = false, mathEnabled = false, questionGroupId = false, questionAreaId = false, questionRandomNo = false, QuestionGroupRandomNo = false, questionMarks = false, questionUUID = false, group_question_marks = false, group_question_uuid = false, questionDisplayMarks = false, group_question_Display_Marks = false)
|
|
{
|
|
console.log('===========================================================================================================================================')
|
|
console.log("group_question_area_id : "+group_question_area_id, 'questionGroupId : '+ questionGroupId, 'questionAreaId : '+questionAreaId)
|
|
console.log('===========================================================================================================================================')
|
|
|
|
const Text_Question_UUID = uuidv4();
|
|
|
|
var textQuestion = "";
|
|
const text_field_created_time = Date.now();
|
|
|
|
var addTextQuestionId = ""
|
|
if(questionRandomNo)
|
|
{
|
|
addTextQuestionId = questionRandomNo;
|
|
}
|
|
else if(QuestionGroupRandomNo)
|
|
{
|
|
addTextQuestionId = QuestionGroupRandomNo;
|
|
}
|
|
else
|
|
{
|
|
addTextQuestionId = text_field_created_time;
|
|
}
|
|
|
|
|
|
|
|
var marks = ""
|
|
if(questionMarks)
|
|
{
|
|
marks = questionMarks;
|
|
}
|
|
else if(group_question_marks)
|
|
{
|
|
marks = group_question_marks;
|
|
}
|
|
else
|
|
{
|
|
marks = 0;
|
|
}
|
|
|
|
|
|
var UUID = "";
|
|
if(questionUUID)
|
|
{
|
|
UUID = questionUUID;
|
|
}
|
|
else if(group_question_marks)
|
|
{
|
|
UUID = group_question_uuid;
|
|
}
|
|
else
|
|
{
|
|
UUID = Text_Question_UUID;
|
|
}
|
|
|
|
var sectionRandomID = localStorage.getItem('sectionId');
|
|
var QuestionGroup_ID = localStorage.getItem('QuestionGroupId');
|
|
|
|
textQuestion +=
|
|
`<div class="col-lg-12 question hidedrag element Question-Border-Top" draggable="true" id="removeAndCloneTextQuestion_${addTextQuestionId}" style="border-top: 3px solid; margin-bottom: 15px; margin-top: -15px;" onclick="toggleClasses(this)" onmouseover="showButtons(this)">
|
|
<div id="dragHandle" class="drag-handle " >
|
|
<i class="fas fa-grip-horizontal"></i>
|
|
</div>
|
|
|
|
<div class="row" style="text-align:right; width: 100%" id="overallAddButtons_${addTextQuestionId}" >
|
|
<div class="col-lg-10 col-md-12">
|
|
<div class=" button-group align-items-center">
|
|
<div class="addButton buttons" style="display: none;" id="AddButtons_${addTextQuestionId}">
|
|
<div class="col-md-2">
|
|
<i class="fa fa-text-width" aria-hidden="true" onclick="addNewQuestions(event, 1)" id="sidetextButton_${sectionRandomID}"></i>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<i class="fa fa-check-circle-o" aria-hidden="true" onclick="addNewQuestions(event, 2)" id="sidechoiseButton_${sectionRandomID}"></i>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<i class="fa fa-th-list" aria-hidden="true" onclick="addNewGroupQuestions(event, 0)" id="sidegroupQuestionButton_${sectionRandomID}"></i>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<i class="fa fa-columns" aria-hidden="true" onclick="addSection()" id="sidesectionButton_${sectionRandomID}"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" style="text-align:right; width: 100%;" id="overallQuestionGRoupAddButtons_${addTextQuestionId}">
|
|
<div class="col-lg-10 col-md-12">
|
|
<div class=" button-group align-items-center">
|
|
<div class="addButton buttons onhover" style="display: none;" id="QuestionGRoupAddButtons_${addTextQuestionId}">
|
|
<div class="col-md-2">
|
|
<i class="fa fa-text-width" aria-hidden="true" onclick="addNewGroupQuestions(event, 1)" id="textButtonSectionQroupside_${QuestionGroup_ID}" title="Question Group Text Question"></i>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<i class="fa fa-check-circle-o" aria-hidden="true" onclick="addNewGroupQuestions(event, 2)" id="choiseButtonSectionQroupside_${QuestionGroup_ID}" title="Question Group Choice Question"></i>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<i class="fa fa-th-list" aria-hidden="true" onclick="MultiLevelQuestionGroup(event)" id="QuestionGroupButtonside_${QuestionGroup_ID}" title="Question Group on Question Group"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="items align-items-center hideondrag" style="display: none;">
|
|
<i class="fa fa-trash-o" onclick="removeClonedTextQuestion(${addTextQuestionId})" style="font-size:20px;"aria-hidden="true"></i>
|
|
<i class="fa fa-clone" onclick="cloneQuestion(event, 1)" id="cloneId_${addTextQuestionId}" style="font-size:20px;" aria-hidden="true"></i>
|
|
</div>
|
|
<div class="col-lg-12 col-md-12 ">
|
|
<input type="hidden" id="Text_Question_UUID_ID_${addTextQuestionId}" value="${UUID}">
|
|
<div class="form_box">
|
|
<label>Question:</label>
|
|
<div type="text" class="richText" id="textQuestionName_${addTextQuestionId}" contenteditable="true" style=" border: 2px solid #EEECFE; margin-top: 4px;">${questionTitle ? questionTitle : ''}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 col-md-12 hideondrag">
|
|
<div class="form_box">
|
|
<label>Subtitle:</label>
|
|
<div class="richText" id="textQuestionSubtitle_${addTextQuestionId}" contenteditable="true" style=" border: 2px solid #EEECFE; margin-top: 4px;">${questionDescription ? questionDescription : ''}</div>
|
|
<math-field id="textQuestionSubtitle_math_${addTextQuestionId}" contenteditable="true">${mathEnabled == 'true' ? questionDescription : ''}</math-field>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 col-md-12 hideondrag">
|
|
<div class="form_box">
|
|
<input class="richText" type="text" placeholder="Enter your answer" id="textField_${addTextQuestionId}" disabled>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 col-md-12 hideondrag">
|
|
<div class="form_box">
|
|
<textarea id="textarea_${addTextQuestionId}" cols="20" rows="10" disabled>Enter Your Answer</textarea>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-8 col-md-8"></div>
|
|
|
|
<div class="col-lg-4 col-md-4 hideondrag text" style="margin-left: 67%;">
|
|
<div class="form_box">
|
|
<div style="margin-left: 80px;"> Marks : </div>
|
|
<input type="text" placeholder="" id="Text_Question_Marks_Id_${addTextQuestionId}" value="${marks}"></input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="type1-switch align-items-center hideondrag" style="display: none;">
|
|
<input type="hidden" value="text" id="question_type_${addTextQuestionId}">
|
|
|
|
|
|
<span>Display Marks</span>
|
|
<label class="switch">
|
|
<input type="checkbox" id="Text_Question_Display_Marks_Id_${addTextQuestionId}" checked>
|
|
<span class="slider round"></span>
|
|
</label>
|
|
|
|
<span>Math</span>
|
|
<label class="switch">
|
|
<input type="checkbox" value="1" id="math_${addTextQuestionId}">
|
|
<span class="slider round"></span>
|
|
</label>
|
|
|
|
<span>Long Answer</span>
|
|
<label class="switch">
|
|
<input type="checkbox" id="longAnswer_${addTextQuestionId}">
|
|
<span class="slider round"></span>
|
|
</label>
|
|
</div>
|
|
</div>`;
|
|
|
|
|
|
if(question_id && !section_id)
|
|
{
|
|
var questionDiv = document.getElementById(question_id);
|
|
questionDiv.insertAdjacentHTML('afterend', textQuestion);
|
|
}
|
|
else if(section_id)
|
|
{
|
|
var sectionDiv = document.getElementById(section_id);
|
|
sectionDiv.insertAdjacentHTML('beforeend', textQuestion);
|
|
}
|
|
else if(questionGroupId)
|
|
{
|
|
var sectionDiv = document.getElementById(questionGroupId);
|
|
sectionDiv.insertAdjacentHTML('beforeend', textQuestion);
|
|
}
|
|
else if(questionAreaId)
|
|
{
|
|
var sectionDiv = document.getElementById(questionAreaId);
|
|
sectionDiv.insertAdjacentHTML('beforeend', textQuestion);
|
|
}
|
|
else if(group_question_area_id !== 0)
|
|
{
|
|
var sectionDiv = document.getElementById(group_question_area_id);
|
|
sectionDiv.insertAdjacentHTML('beforeend', textQuestion);
|
|
}
|
|
|
|
|
|
var longAnswerRandomId = 'longAnswer_' + addTextQuestionId;
|
|
var textareaRandomId = 'textarea_' + addTextQuestionId;
|
|
var textFieldRandomId = 'textField_' + addTextQuestionId;
|
|
|
|
var longAnswerId = document.getElementById(longAnswerRandomId);
|
|
var textareaId = document.getElementById(textareaRandomId);
|
|
var textFieldId = document.getElementById(textFieldRandomId);
|
|
|
|
// Hide and show of text and textare using switch long answer
|
|
$(textareaId).hide();
|
|
$(longAnswerId).on("change", function() {
|
|
if (longAnswerId.checked) {
|
|
$(textareaId).show();
|
|
$(textFieldId).hide();
|
|
} else {
|
|
$(textareaId).hide();
|
|
$(textFieldId).show();
|
|
}
|
|
});
|
|
|
|
|
|
var ChoiceMathSwitch ='math_' + addTextQuestionId;
|
|
var textQuestionSubtitle_math = 'textQuestionSubtitle_math_' + addTextQuestionId;
|
|
var textQuestionSubtitle = 'textQuestionSubtitle_' + addTextQuestionId;
|
|
|
|
var ChoiceMathSwitchId = document.getElementById(ChoiceMathSwitch)
|
|
var textQuestionSubtitle_mathId = document.getElementById(textQuestionSubtitle_math)
|
|
var textQuestionSubtitleId = document.getElementById(textQuestionSubtitle)
|
|
|
|
|
|
if (mathEnabled === 'true')
|
|
{
|
|
|
|
ChoiceMathSwitchId.checked = true;
|
|
$(textQuestionSubtitleId).hide();
|
|
$(textQuestionSubtitle_previousDiv).hide();
|
|
$(textQuestionSubtitle_mathId).show();
|
|
}
|
|
else
|
|
{
|
|
|
|
ChoiceMathSwitchId.checked = false;
|
|
$(textQuestionSubtitleId).show();
|
|
$(textQuestionSubtitle_mathId).hide();
|
|
}
|
|
|
|
|
|
ChoiceMathSwitchId.addEventListener("change", function() {
|
|
|
|
if (ChoiceMathSwitchId.checked) {
|
|
$(textQuestionSubtitle_mathId).show();
|
|
$(textQuestionSubtitleId).hide();
|
|
$(textQuestionSubtitle_previousDiv).hide();
|
|
} else {
|
|
$(textQuestionSubtitleId).show();
|
|
$(textQuestionSubtitle_mathId).hide();
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
var AddButtons_Raw = 'AddButtons_'+addTextQuestionId;
|
|
var overallAddButtons_Raw = 'overallAddButtons_'+addTextQuestionId;
|
|
var QuestionGroupAddButtons_Raw = 'QuestionGRoupAddButtons_'+addTextQuestionId;
|
|
var overallQuestionGroupAddButtons_Raw = 'overallQuestionGRoupAddButtons_'+addTextQuestionId;
|
|
|
|
var AddButtons_ID = document.getElementById(AddButtons_Raw)
|
|
var QuestionGroupAddButtons_ID = document.getElementById(QuestionGroupAddButtons_Raw)
|
|
var removeAndCloneTextQuestion_ID = document.getElementById(removeAndCloneTextQuestion_Raw);
|
|
|
|
// console.log('group_question_area_id');
|
|
// console.log(group_question_area_id);
|
|
// console.log('questionTitle');
|
|
// console.log(questionTitle);
|
|
// if(group_question_area_id !== false )//questionGroupId
|
|
if(group_question_area_id !== false )//questionGroupId
|
|
{
|
|
// alert('three')
|
|
// three button group
|
|
$('#'+overallQuestionGroupAddButtons_Raw).show();
|
|
$('#'+overallAddButtons_Raw).hide();
|
|
|
|
}
|
|
else{
|
|
|
|
// alert('four')
|
|
// four button group
|
|
|
|
if(questionAreaId !== false)
|
|
{
|
|
$('#'+overallQuestionGroupAddButtons_Raw).show();
|
|
$('#'+overallAddButtons_Raw).hide();
|
|
}
|
|
else
|
|
{
|
|
$('#'+overallQuestionGroupAddButtons_Raw).hide();
|
|
$('#'+overallAddButtons_Raw).show();
|
|
}
|
|
|
|
// $('#'+overallQuestionGroupAddButtons_Raw).hide();
|
|
// $('#'+overallAddButtons_Raw).show();
|
|
}
|
|
|
|
|
|
var removeAndCloneTextQuestion_Raw = 'removeAndCloneTextQuestion_'+addTextQuestionId;
|
|
var AddButtons_Raw = 'AddButtons_'+addTextQuestionId;
|
|
$('#'+removeAndCloneTextQuestion_Raw).mouseenter(function(){
|
|
|
|
|
|
if(group_question_area_id !== false)
|
|
{
|
|
add_button_hide_and_show(QuestionGroupAddButtons_Raw);
|
|
}
|
|
else
|
|
{
|
|
if(questionAreaId !== false)
|
|
{
|
|
add_button_hide_and_show(QuestionGroupAddButtons_Raw);
|
|
}
|
|
else
|
|
{
|
|
add_button_hide_and_show(AddButtons_Raw);
|
|
}
|
|
}
|
|
|
|
})
|
|
$('#'+AddButtons_Raw).hide();
|
|
$('#'+QuestionGroupAddButtons_Raw).hide();
|
|
|
|
|
|
|
|
var typeOneQuestionName = 'textQuestionName_' + addTextQuestionId;
|
|
var quill = new Quill('#'+typeOneQuestionName, {
|
|
theme: 'snow',
|
|
modules: {
|
|
toolbar: toolbarOptions
|
|
},
|
|
|
|
});
|
|
|
|
var typeOneQuestionSubtitle = 'textQuestionSubtitle_' + addTextQuestionId;
|
|
var quill = new Quill('#'+typeOneQuestionSubtitle, {
|
|
theme: 'snow',
|
|
modules: {
|
|
toolbar: toolbarOptions
|
|
},
|
|
});
|
|
|
|
|
|
var textQuestionName_Div = 'textQuestionName_' + addTextQuestionId;
|
|
var textQuestionNewRTEId = 'typeOnetextQuestionName_rtc_' + addTextQuestionId;
|
|
var textQuestionName_previousDiv = $('#'+textQuestionName_Div).prev();
|
|
textQuestionName_previousDiv.attr("id", textQuestionNewRTEId);
|
|
$('#'+textQuestionName_Div).click(function() {
|
|
|
|
rtc_hide_and_show(textQuestionNewRTEId);
|
|
});
|
|
|
|
|
|
var textQuestionSubtitle_Div = 'textQuestionSubtitle_' + addTextQuestionId;
|
|
var textQuestionSubtitleNewRTEId = 'typeOnetextQuestionSubtitle_rtc_' + addTextQuestionId;
|
|
var textQuestionSubtitle_previousDiv = $('#'+textQuestionSubtitle_Div).prev();
|
|
textQuestionSubtitle_previousDiv.attr("id", textQuestionSubtitleNewRTEId);
|
|
$('#'+textQuestionSubtitle_Div).click(function() {
|
|
|
|
rtc_hide_and_show(textQuestionSubtitleNewRTEId);
|
|
|
|
});
|
|
|
|
$(textQuestionName_previousDiv).hide();
|
|
$(textQuestionSubtitle_previousDiv).hide();
|
|
|
|
|
|
var DisplayMark_RawID = "Text_Question_Display_Marks_Id_" + addTextQuestionId;
|
|
var DisplayMark_ID = document.getElementById(DisplayMark_RawID)
|
|
|
|
if(questionDisplayMarks === 'true'){
|
|
|
|
DisplayMark_ID.checked = true;
|
|
|
|
}else if(group_question_Display_Marks === 'true' && group_question_Display_Marks !== null){
|
|
|
|
DisplayMark_ID.checked = true;
|
|
|
|
}else{
|
|
DisplayMark_ID.checked = false;
|
|
}
|
|
|
|
|
|
|
|
var Textid = 'textQuestionName_'+ addTextQuestionId;
|
|
var inputElement = document.getElementById(Textid);
|
|
|
|
$(inputElement).keyup(function(event) {
|
|
json2nav();
|
|
clearSidebarWrapper();
|
|
navpane();
|
|
});
|
|
|
|
json2nav();
|
|
clearSidebarWrapper();
|
|
navpane();
|
|
|
|
}
|
|
|
|
|
|
|
|
//Function for Add Group Question inside the Group QUestion Like Question
|
|
function MultiLevelQuestionGroup(e)
|
|
{
|
|
get_question_area_id = e.target.id;
|
|
var question_group_id = get_question_area_id.split("_")[1];
|
|
var add_question_group_id = 'group_question_area_'+question_group_id;
|
|
|
|
var MultiLevelQuestionGroup_obj = {
|
|
|
|
'add_question_group_id': add_question_group_id
|
|
|
|
}
|
|
|
|
addQuestionGroup(MultiLevelQuestionGroup_obj)
|
|
|
|
|
|
}
|
|
|
|
//Function for Add a Text and Choice Question in the Section Question Area
|
|
function addNewQuestions(e, type)
|
|
{
|
|
|
|
clone_id_time = e.target.id;
|
|
var clone_id = clone_id_time.split("_")[1];
|
|
var section_id = 'question_area_'+clone_id;
|
|
|
|
if(type == 1){
|
|
textQuestion(false, section_id);
|
|
}else if(type == 2){
|
|
groupQuestion(false, section_id);
|
|
}
|
|
}
|
|
|
|
//Function For Add a Group Question in the Section Question Area
|
|
function addNewGroupQuestions(e, type)
|
|
{
|
|
|
|
clone_id_time = e.target.id;
|
|
var clone_id = clone_id_time.split("_")[1];
|
|
var group_question_area_id = 'group_question_area_'+clone_id;
|
|
|
|
if(type == 1){
|
|
textQuestion(false, false, group_question_area_id);
|
|
}else if(type == 2){
|
|
groupQuestion(false, false, group_question_area_id);
|
|
}else {
|
|
var question_group_id = 'question_area_'+clone_id;
|
|
|
|
var addNewGroupQuestions_obj = { 'question_group_id': question_group_id }
|
|
addQuestionGroup(addNewGroupQuestions_obj);
|
|
|
|
}
|
|
}
|
|
|
|
//Function for Add Choice Field in the Choice Question Area
|
|
function ConstructAddNewChoiceID(e){
|
|
|
|
var addChoiceArea = e.target.id;
|
|
var addChoiceAreaTime = addChoiceArea.split("_")[1];
|
|
var addChoiceAreaId = 'addChoiceArea_'+addChoiceAreaTime;
|
|
var addChoiceAreaId2 = document.getElementById(addChoiceAreaId);
|
|
addNewChoice(addChoiceAreaId2)
|
|
|
|
}
|
|
|
|
// create a text and group or choice type question function
|
|
function cloneQuestion(e,type)
|
|
{
|
|
clone_id_time = e.target.id;
|
|
var clone_id = clone_id_time.split("_")[1];
|
|
var question_id = "";
|
|
|
|
if(type == 1){
|
|
question_id = 'removeAndCloneTextQuestion_'+clone_id;
|
|
textQuestion(question_id);
|
|
}else{
|
|
question_id = 'removeAndCloneQroupQuestion_'+clone_id;
|
|
groupQuestion(question_id);
|
|
}
|
|
|
|
}
|
|
|
|
// remove the cloned text type questions function
|
|
function removeClonedTextQuestion(index)
|
|
{
|
|
var element = document.getElementById('removeAndCloneTextQuestion_'+ index);
|
|
if (element) {
|
|
element.remove();
|
|
}
|
|
}
|
|
|
|
// remove the cloned choice or group type questions function
|
|
function removeClonedQroupQuestion(index)
|
|
{
|
|
var element = document.getElementById('removeAndCloneQroupQuestion_'+ index);
|
|
if (element) {
|
|
element.remove();
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
let draggedItemGroup = null;
|
|
let draggedItemQuestion = null;
|
|
let dropTarget = null;
|
|
let richTextElements = null;
|
|
let questionLabels = null;
|
|
|
|
// Event listener for .draggable-group elements
|
|
document.addEventListener('mousedown', function (e) {
|
|
const dragHandle = e.target.closest('.drag-handle');
|
|
|
|
if (dragHandle) {
|
|
// If the click is inside a drag handle, find the corresponding .draggable-group
|
|
const draggableGroup = dragHandle.closest('.draggable-group');
|
|
|
|
if (draggableGroup) {
|
|
// Initiate the drag operation for the .draggable-group
|
|
draggedItemGroup = draggableGroup;
|
|
|
|
// Add a dragStart event listener to set data
|
|
draggedItemGroup.addEventListener('dragstart', function (e) {
|
|
e.dataTransfer.setData('text/plain', draggedItemGroup.id);
|
|
console.log(draggedItemGroup.id);
|
|
// Hide all elements with class "hideondrag"
|
|
richTextElements = document.querySelectorAll('.hideondrag');
|
|
richTextElements.forEach((element) => {
|
|
element.style.display = 'none';
|
|
});
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
// Event listener for .question elements
|
|
document.addEventListener('mousedown', function (e) {
|
|
const dragHandle = e.target.closest('.drag-handle');
|
|
|
|
if (dragHandle) {
|
|
// If the click is inside a drag handle, find the corresponding .question
|
|
const questionElement = dragHandle.closest('.question');
|
|
|
|
if (questionElement) {
|
|
// Initiate the drag operation for the .question
|
|
draggedItemQuestion = questionElement;
|
|
|
|
// Add a dragStart event listener to set data
|
|
draggedItemQuestion.addEventListener('dragstart', function (e) {
|
|
e.dataTransfer.setData('text/plain', draggedItemQuestion.id);
|
|
|
|
// Hide all elements with class "hideondrag"
|
|
richTextElements = document.querySelectorAll('.hideondrag');
|
|
richTextElements.forEach((element) => {
|
|
element.style.display = 'none';
|
|
});
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
document.addEventListener('dragover', function (e) {
|
|
e.preventDefault();
|
|
|
|
// Allow scrolling while dragging
|
|
if (e.clientY < 100) {
|
|
window.scrollBy(0, -20);
|
|
} else if (e.clientY > window.innerHeight - 100) {
|
|
window.scrollBy(0, 20);
|
|
}
|
|
|
|
// Highlight the closest .draggable-group element if it's the dragged item
|
|
if (draggedItemGroup) {
|
|
dropTarget = e.target.closest('.draggable-group');
|
|
if (dropTarget) {
|
|
dropTarget.classList.add('highlight');
|
|
}
|
|
}
|
|
|
|
// Highlight the closest .question element if it's the dragged item
|
|
if (draggedItemQuestion) {
|
|
dropTarget = e.target.closest('.question');
|
|
if (dropTarget) {
|
|
dropTarget.classList.add('highlight');
|
|
}
|
|
}
|
|
});
|
|
|
|
document.addEventListener('dragleave', function (e) {
|
|
// Remove the highlight class when leaving the drop target
|
|
if (dropTarget) {
|
|
dropTarget.classList.remove('highlight');
|
|
}
|
|
if (dropTarget.classList.contains('nodrop')) {
|
|
// Remove the highlight class when leaving the drop target
|
|
dropTarget.classList.remove('highlight');
|
|
}
|
|
});
|
|
|
|
|
|
document.addEventListener('dragend', function () {
|
|
// Remove the highlight class from all .draggable-group and .question elements
|
|
const highlightedElements = document.querySelectorAll('.draggable-group, .question');
|
|
highlightedElements.forEach((element) => {
|
|
element.classList.remove('highlight');
|
|
});
|
|
|
|
// Show all elements with class "hideondrag" again for .draggable-group
|
|
if (richTextElements) {
|
|
richTextElements.forEach((element) => {
|
|
element.style.display = '';
|
|
});
|
|
}
|
|
|
|
// Show all elements with class "hideondrag" again for .question
|
|
if (richTextElements) {
|
|
richTextElements.forEach((element) => {
|
|
element.style.display = '';
|
|
});
|
|
}
|
|
|
|
dropTarget = null;
|
|
draggedItemGroup = null;
|
|
draggedItemQuestion = null;
|
|
});
|
|
|
|
document.addEventListener('drop', function (e) {
|
|
if (draggedItemGroup && dropTarget) {
|
|
e.preventDefault();
|
|
const rect = dropTarget.getBoundingClientRect();
|
|
const mouseY = e.clientY;
|
|
const isAfter = mouseY > rect.top + rect.height / 2;
|
|
if (isAfter) {
|
|
dropTarget.insertAdjacentElement('afterend', draggedItemGroup);
|
|
} else {
|
|
dropTarget.insertAdjacentElement('beforebegin', draggedItemGroup);
|
|
}
|
|
draggedItemGroup = null;
|
|
dropTarget = null;
|
|
} else if (draggedItemQuestion && dropTarget) {
|
|
e.preventDefault();
|
|
const rect = dropTarget.getBoundingClientRect();
|
|
const mouseY = e.clientY;
|
|
const isAfter = mouseY > rect.top + rect.height / 2;
|
|
if (isAfter) {
|
|
dropTarget.insertAdjacentElement('afterend', draggedItemQuestion);
|
|
} else {
|
|
dropTarget.insertAdjacentElement('beforebegin', draggedItemQuestion);
|
|
}
|
|
draggedItemQuestion = null;
|
|
dropTarget = null;
|
|
} else {
|
|
console.error('No dragged item or drop target found.');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
<script>
|
|
// Store a reference to the currently displayed div
|
|
let currentlyDisplayedDiv = null;
|
|
|
|
function toggleClasses(element) {
|
|
const items = element.querySelector('.items');
|
|
const type1Switch = element.querySelector('.type1-switch');
|
|
|
|
if (items.style.display === 'none' || items !== currentlyDisplayedDiv) {
|
|
// Hide the previously displayed div if there is one
|
|
if (currentlyDisplayedDiv) {
|
|
currentlyDisplayedDiv.querySelector('.items').style.display = 'none';
|
|
currentlyDisplayedDiv.querySelector('.type1-switch').style.display = 'none';
|
|
}
|
|
|
|
// Show the clicked div
|
|
items.style.display = 'block';
|
|
type1Switch.style.display = 'block';
|
|
currentlyDisplayedDiv = element;
|
|
|
|
// Add a click event listener to the document body to hide the div when clicking outside
|
|
document.body.addEventListener('click', clickOutsideHandler);
|
|
} else {
|
|
// Hide the clicked div
|
|
items.style.display = 'none';
|
|
type1Switch.style.display = 'none';
|
|
currentlyDisplayedDiv = null;
|
|
|
|
// Remove the click event listener when hiding the div
|
|
document.body.removeEventListener('click', clickOutsideHandler);
|
|
}
|
|
}
|
|
|
|
function clickOutsideHandler(event) {
|
|
// Check if the click occurred outside of the currently displayed div
|
|
if (currentlyDisplayedDiv && !currentlyDisplayedDiv.contains(event.target)) {
|
|
currentlyDisplayedDiv.querySelector('.items').style.display = 'none';
|
|
currentlyDisplayedDiv.querySelector('.type1-switch').style.display = 'none';
|
|
currentlyDisplayedDiv = null;
|
|
|
|
// Remove the click event listener when hiding the div
|
|
document.body.removeEventListener('click', clickOutsideHandler);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|