projectb/QuestionPaperPreview.js

459 lines
21 KiB
JavaScript

function QuestionPaperPreview(jsonData){
// The provided JSON data
// console.log(jsonData)
// start Remove <p> tag
var jsonDat = jsonData;
// Remove <p> tags only with <br> tags
function removeEmptyPTags(htmlString) {
var tempdiv = document.createElement('div');
tempdiv.innerHTML = htmlString;
var paragraphs = tempdiv.querySelectorAll('p');
paragraphs.forEach(function(paragraph) {
if (paragraph.innerHTML.trim() === '<br>') {
paragraph.remove();
}
});
return tempdiv.innerHTML;
}
// Recursive function to modify HTML content in an object
function modifyHTMLProperties(obj) {
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
if (typeof obj[key] === 'string') {
// If the property is a string, modify it
obj[key] = removeEmptyPTags(obj[key]);
} else if (typeof obj[key] === 'object') {
// If the property is an object, recursively modify its properties
modifyHTMLProperties(obj[key]);
}
}
}
}
modifyHTMLProperties(jsonDat);
//end Remove <p> tag
function convertToLatex(text, mathstatus) {
// console.log('convertToLatex : ', mathstatus);
// console.log('convertToLatex text : ', text);
// const mathStatusBoolean = JSON.parse(mathstatus);
// Check if the text contains <p> tags
if (!/<p>|<\/p>/i.test(text)) {
if (mathstatus === 'Math') {
// Use MathJax to convert the text to LaTeX
const cov = MathJax.tex2chtml(text).outerHTML;
// console.log('Latex Full : ', cov);
const onlyMath = convertMathJaxToLatex(cov)
// console.log('Latex small : ', onlyMath);
return onlyMath;
} else {
return text;
}
} else {
return text;
}
}
function convertMathJaxToLatex(mathJaxCode) {
// Replace MathJax-specific tags and attributes
let latexCode = mathJaxCode
.replace(/<mjx-container[^>]*>/g, '')
.replace(/<\/mjx-container>/g, '')
.replace(/<mjx-math[^>]*>/g, '')
.replace(/<\/mjx-math>/g, '')
.replace(/<mjx-mi[^>]*>/g, '')
.replace(/<\/mjx-mi>/g, '')
.replace(/<mjx-c[^>]*>/g, '')
.replace(/<\/mjx-c>/g, '')
.replace(/<mjx-assistive-mml[^>]*>/g, '')
.replace(/<\/mjx-assistive-mml>/g, '')
.replace(/&lt;/g, '<')
.replace(/&gt;/g, '>');
return latexCode;
}
// Initialize the formatted question paper string
let questionPaper = "";
// Function to recursively convert JSON to a formatted question paper
function convertJSONToQuestionPaper(data, depth = 0, sectionIndex , questionIndex = 1) {
const sections = data.sections;
const questionPaperTitle = data.question_paper_title;
var questionPaperDescription = data.question_paper_description;
var title = '';
if(questionPaperTitle == '' || questionPaperTitle == '<p><br></p>' || questionPaperTitle == null){
var title = 'Untitled'
}else{
title = removeHtmlTags(questionPaperTitle);
}
if(questionPaperDescription == '' || questionPaperDescription == '<p><br></p>' || questionPaperDescription == null){
var questionPaperDescription = ''
}else{
questionPaperDescription = data.question_paper_description;
}
console.log('questionPaperDescription : ', questionPaperDescription)
// Wrap the heading elements in <div> elements with CSS for centering
questionPaper += `<div style="text-align: center; font-weight: bolder; "><h1>${title}</h1></div>`;
questionPaper += `<div style="text-align: center;"><h5>${questionPaperDescription}</h5></div>`;
// questionPaper += "<br><br><br>"; // Add a newline for separation
// Process each section
sections.forEach((section, sectionIndex) => {
depth2=0
description_align =28;
// console.log(sectionIndex);
const sectionTitle = section.section_title;
const modifiedSectionTitle = sectionTitle.replaceAll('<p>', '<p id="sectionTitle">');//add the id for Section Title
// console.log(section.section_attempt_any);
if (section.attributes.AttemptAny) {
var sectionAttempt = `<p id="sectionAttempt">Attempt Any : ${section.attributes.AttemptAny}</p>`;
} else {
var sectionAttempt = `<p id="sectionAttempt"> </p>`;
}
if (section.section_marks == 0 || section.section_marks == '') {
var sectionMark = `<p id="sectionMark"> </p>`;
} else {
var sectionMark = `<p id="sectionMark">Marks: ${section.section_marks}</p>`;
}
var displayMarks = section.attributes.DisplayMarks;
// console.log('displayMarks : ', displayMarks)
if (displayMarks === 'false') {
var parser = new DOMParser();
var doc = parser.parseFromString(sectionMark, 'text/html');
var questionMarkElement = doc.body.firstChild;
questionMarkElement.setAttribute('hidden', 'hidden');
sectionMark =questionMarkElement.outerHTML
var doc = parser.parseFromString(sectionAttempt, 'text/html');
var questionMarkElement = doc.body.firstChild;
questionMarkElement.style.marginRight = '106px';
// console.log(questionMarkElement);
sectionAttempt =questionMarkElement.outerHTML
}
const sectionDescriptio = section.section_description;
const sectionDescription = sectionDescriptio.replaceAll('<p>', '<p class="section-Description">');
// const questions = section.questions;
// Add appropriate indentation for nested sections
const indentation = " ".repeat(depth);
// if (section.section_attempt_any === '') {
// sectionAttempt = sectionAttempt.replace('<p id="sectionAttempt">', '<p id="sectionAttempt" hidden>')
// }
// if (section.section_marks === '') {
// sectionMark = sectionMark.replace('<p id="sectionMark">', '<p id="sectionMark" hidden>')
// }
questionPaper += `${indentation}<hr id="horizontal">${modifiedSectionTitle}${sectionMark}${sectionAttempt}${indentation}${sectionDescription}`;
displayQuestions(section)
});
// Return the formatted question paper
// console.log(questionPaper);
return questionPaper;
}
var depth2 =0
var description_align =25;
function displayQuestions(data,parentSno =''){
var questionIndentation = " ".repeat(depth2);
console.log(data)
var dataa =data.questions;
dataa.forEach((question, index) =>{
console.log(question.descriptionMath);
var currentSno = parentSno + (index + 1) + '.';
console.log('currentSno : ', currentSno);
var temp_sno= currentSno.slice(0,-1)
var currentSno_length =currentSno.length-(currentSno.length/2)
console.log('currentSno_length : ', currentSno_length);
if (currentSno_length == 1) {
description_align =27
} else if (currentSno_length == 2) {
description_align =20
}else if(currentSno_length == 3){
description_align =48
}else if(currentSno_length == 4) {
description_align =62
}
else if(currentSno_length == 5) {
description_align =78
}
if(question.descriptionMath == 'Math'){
description_align = -364
}
var GroupQuestionTilteAlign = 0;
if (question.group_title) {
let cleanedTex = question.attributes.No.replace(/\s+/g, ' ').trim();
let cleanedText=cleanedTex.replace('<p>','').replace('</p>','');
var question_id_length =cleanedText.length;
if (question_id_length == 1) {
GroupQuestionTilteAlign =15
} else if (question_id_length == 3) {
GroupQuestionTilteAlign =33
}else if(question_id_length == 5){
GroupQuestionTilteAlign =47
}else if(question_id_length == 7) {
GroupQuestionTilteAlign =63
}else if(question_id_length == 4) {
GroupQuestionTilteAlign =40
}else if(question_id_length == 6) {
GroupQuestionTilteAlign =54
}else if(question_id_length == 2){
GroupQuestionTilteAlign =23
}
// const questionId =`<p class="GroupQuestionId">${cleanedText})</p>`
const questionId =cleanedText
const questionGroupSetP = `${question.group_title}`;
const questionGroupmodify =questionGroupSetP.replaceAll('<p>', `<p id="question-Group-Id" style="padding-left:${GroupQuestionTilteAlign}px">`)
if (question.attributes.AttemptAny) {
var questionGroupAttempt = `<p id="group_attempt_any" class="GroupAttempAny">Attempt Any : ${question.attributes.AttemptAny} </p>`
}else{
var questionGroupAttempt = `<p id="group_attempt_any" class="GroupAttempAny"> </p>`
}
if (question.group_marks === 0 || question.group_marks === '') {
var questionGroupMark = `<p id="group_marks"> </p>`
}else{
var questionGroupMark = `<p id="group_marks">Marks : ${question.group_marks} </p>`
}
var displayMarks = question.attributes.DisplayMarks;
if (displayMarks === 'false') {
var parser = new DOMParser();
var doc = parser.parseFromString(questionGroupMark, 'text/html');
var questionMarkElement = doc.body.firstChild;
questionMarkElement.setAttribute('hidden', 'hidden');
questionGroupMark =questionMarkElement.outerHTML
}
const questionGroupDescriptio = question.group_description;
const questionGroupDescription = questionGroupDescriptio.replaceAll('<p>', '<p class="question-Group-Description">')
// if (question.group_attempt_any === '') {
// questionGroupAttempt = questionGroupAttempt.replace('<p id="group_attempt_any">', '<p id="group_attempt_any" hidden>')
// }
// if (question.group_marks === '') {
// questionGroupMark = questionGroupMark.replace('<p id="group_marks">', '<p id="group_marks" hidden>')
// }
questionPaper += `<div class="textGroup"><div class="text-group-align" style="margin-left:0px;">${questionId})${questionGroupmodify}</div>`
questionPaper += `<div class="group_marks_attmpt">${questionGroupAttempt}${questionGroupMark}</div>`;
// questionPaper += `<div class="group_attempt_any">${questionGroupAttempt}</div>`;
questionPaper += `<div class="group-descrip" style="margin-left:${description_align}px">${questionGroupDescription}</div></div>`;
depth2++
} else if (question.question) {
// console.log('serial no : ', question.attributes.No);
let cleanedTex = question.attributes.No.replace(/\s+/g, ' ').trim();
let cleanedText=cleanedTex.replace('<p>','').replace('</p>','')
var question_id_length =cleanedText.length;
if (question_id_length == 1) {
GroupQuestionTilteAlign =14
} else if (question_id_length == 3) {
GroupQuestionTilteAlign =26
}else if(question_id_length == 5){
GroupQuestionTilteAlign =41
}else if(question_id_length == 7) {
GroupQuestionTilteAlign =54
}else if(question_id_length == 2) {
GroupQuestionTilteAlign =25
}else if(question_id_length == 4) {
GroupQuestionTilteAlign =42
}else if(question_id_length == 6) {
GroupQuestionTilteAlign =58
}
// console.log(question);
// const questionId =`<p class="questionId">${cleanedText})</p>`;
const questionI =cleanedText;
// console.log('cleanedText : ', questionI);
var questionId = questionI.replace('<p>', '<p class="questionId">');
const questionTex = question.question;
const questionText = questionTex.replaceAll('<p>', `<p class="question_Text" style="margin-left:${GroupQuestionTilteAlign}px">`);
// console.log(questionText);
const questionDescriptio = question.question_description;
const questionDescription = questionDescriptio.replaceAll('<p>', '<p class="question-Description">')
const mathstatus = question.descriptionMath;
const titlemathstatus = question.titleMath;
console.log('questionText : ', questionText)
console.log('titlemathstatus : ', titlemathstatus)
if (question.marks == 0 || question.marks == '' ) {
var questionMark = `<p id="question-mark"> </p>`;
} else {
var questionMark = `<p id="question-mark">Marks :${question.marks}</p>`;
}
var displayMarks =question.attributes.DisplayMarks
if (displayMarks === 'false') {
var parser = new DOMParser();
var doc = parser.parseFromString(questionMark, 'text/html');
var questionMarkElement = doc.body.firstChild;
questionMarkElement.setAttribute('hidden', 'hidden');
questionMark =questionMarkElement.outerHTML;
}
// console.log(questionMark);
const multipleAnswer =question.question_sub_type;
if (question.marks == '') {
questionMark = questionMark.replace('<p id="question-mark">', '<p id="question-mark" hidden>')
}
// questionPaper += `<div id="parent" class="text-qus-align">${temp_sno})${convertToLatex(questionText, mathstatus)}</div>${questionMark}<div class="text-des align-right" style="margin-left:${description_align}px">${convertToLatex(questionDescription, mathstatus)}</div>`;
questionPaper += `<div id="parent" class="text-qus-align">${questionId})${convertToLatex(questionText, titlemathstatus)}</div>${questionMark}<div class="text-des align-right" style="margin-left:${description_align}px;">${convertToLatex(questionDescription, mathstatus)}</div>`;
if (question.question_type === "group") {
var answers = question.answers;
console.log('choice answers math: ', question.answers)
var choisealgin =25
// var currentSno_length1 =currentSno.length-(currentSno.length/2)
var currentSno_length1 =question_id_length
// console.log(answerId);
// console.log(currentSno_length1);
if (currentSno_length1 == 1) {
// choisealgin =26
choisealgin =52
} else if (currentSno_length1 == 2) {
choisealgin = 52
}else if(currentSno_length1 == 3){
choisealgin =33
}else if(currentSno_length1 == 4) {
choisealgin =41
}
else if(currentSno_length1 == 5) {
choisealgin =46
}else if(currentSno_length1 == 6) {
choisealgin =46
}else if(currentSno_length1 == 7) {
choisealgin =46
}else if(currentSno_length1 == 8) {
choisealgin =68
}
const alphabetOptions = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; // Define the alphabet options
for (let i = 0; i < answers.length; i++) { // change the i +=2 aadhavan
// console.log(answers);
const optionA = alphabetOptions[i];
// const optionB = alphabetOptions[i + 1];
var math = answers[i].is_math_enabled;
// var choice_name_set =answers[i].choice_name.replace('<p>','<p class="Choise_Question_Align">')
var choiceClass = ''
if (math === 'Math') {
choiceClass = 'text-option-align2';
}else{
choiceClass = 'text-option-align';
}
const answerA = answers[i] ? `${optionA}. ${convertToLatex(answers[i].choice_name, math)}` : '';
console.log('choice latex : ',answerA);
// const answerB = answers[i + 1] ? `${optionB}. ${convertToLatex(answers[i + 1].choice_name, mathstatus)}` : '';
if (multipleAnswer == 'false') {
questionPaper += `<div class="${choiceClass}" style="margin-left:${choisealgin}px;"><input class="optionSelectArea" type="radio" name="answer" value="A"> <p class="ChoiceOption">${answerA.padEnd(10)}</p></div>`;
}else{
questionPaper += `<div class="${choiceClass}" style="margin-left:${choisealgin}px;"><input class="optionSelectArea" type="checkbox" name="answer" value="A"> <p class="ChoiceOptionMultiple">${answerA.padEnd(10)}</p></div>`;
}
}
}
}
if (question.questions) {
displayQuestions(question, currentSno);
}
})
}
// Call the function and display the formatted question paper
const formattedQuestionPaper = convertJSONToQuestionPaper(jsonData, 0, 1, 1);
const questionPaperElement = document.getElementById("questionPaper");
questionPaperElement.innerHTML = formattedQuestionPaper; // Use innerHTML here
$("#overlay").hide();
}
function removeHtmlTags(inputString) {
const cheerio = require('cheerio');
const $ = cheerio.load(inputString);
const text = $.text();
return text;
}
// function convertToLatex(text, mathstatus) {
// // Parse mathstatus into a boolean
// const mathStatusBoolean = true
// // Check if the text contains <p> tags
// console.log(text);
// // console.log("ff")
// if (!/<p>|<\/p>/i.test(text)) {
// // console.log('text:' , text)
// if (mathStatusBoolean) {
// // console.log('text1:' , text)
// // Use MathJax to convert the text to LaTeX
// const cov = MathJax.tex2chtml(text).outerHTML;
// console.log('cov:' , cov)
// return cov;
// } else {
// // Return the text as-is
// return text;
// }
// } else {
// console.log("pq")
// const cov = MathJax.tex2chtml(text).outerHTML;
// console.log('cov:' , cov)
// return cov;
// // Return the text as-is
// return text;
// }style="margin-left:27px;position: absolute;right: 546px;bottom: 10px;"
// }