PREVIEW-ALGINMENT-CHANGE : AADHAVAN
This commit is contained in:
aadhavan
parent
d576d8aed4
commit
5e8e14e49c
@ -1,10 +1,8 @@
|
||||
|
||||
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) {
|
||||
@ -39,11 +37,9 @@ modifyHTMLProperties(jsonDat);
|
||||
//end Remove <p> tag
|
||||
|
||||
|
||||
|
||||
function convertToLatex(text, mathstatus) {
|
||||
// Parse mathstatus into a boolean
|
||||
const mathStatusBoolean = JSON.parse(mathstatus);
|
||||
|
||||
// Check if the text contains <p> tags
|
||||
if (!/<p>|<\/p>/i.test(text)) {
|
||||
if (mathStatusBoolean) {
|
||||
@ -63,46 +59,104 @@ function convertToLatex(text, mathstatus) {
|
||||
let questionPaper = "";
|
||||
|
||||
|
||||
function CheakQnType(question, questionIndex, depth,nested) {
|
||||
const questionType = question.question_type;
|
||||
if (questionType) {
|
||||
processQuestion(question, questionIndex, depth,nested);
|
||||
|
||||
|
||||
|
||||
// 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;
|
||||
const questionPaperDescription = data.question_paper_description;
|
||||
|
||||
|
||||
// Wrap the heading elements in <div> elements with CSS for centering
|
||||
questionPaper += `<div style="text-align: center; font-weight: bolder; "><h1>${questionPaperTitle}</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
|
||||
var sectionAttempt = `<p id="sectionAttempt">Attempt Any : ${section.section_attempt_any}</p>`;
|
||||
var sectionMark = `<p id="sectionMark">Marks: ${section.section_marks}</p>`;
|
||||
const sectionDescription = section.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);
|
||||
var dataa =data.questions;
|
||||
dataa.forEach((question, index) =>{
|
||||
var currentSno = parentSno + (index + 1) + '.';
|
||||
|
||||
var currentSno_length =currentSno.length-(currentSno.length/2)
|
||||
if (currentSno_length == 1) {
|
||||
description_align =25
|
||||
} else if (currentSno_length == 2) {
|
||||
description_align =50
|
||||
}else if(currentSno_length == 3){
|
||||
description_align =65
|
||||
}else {
|
||||
GroupQuestion(question, questionIndex, depth);
|
||||
description_align =80
|
||||
}
|
||||
|
||||
if (question.group_title) {
|
||||
const questionGroupSetP = `${question.group_title}`;
|
||||
const questionGroupmodify =questionGroupSetP.replaceAll('<p>', '<p id="question-Group-Id">')
|
||||
var questionGroupAttempt = `<p id="group_attempt_any">Attempt Any : ${question.group_attempt_any} </p>`
|
||||
var questionGroupMark = `<p id="group_marks">Marks : ${question.group_marks} </p>`
|
||||
if (question.group_attempt_any === '') {
|
||||
questionGroupAttempt = questionGroupAttempt.replace('<p id="group_attempt_any">', '<p id="group_attempt_any" hidden>')
|
||||
}
|
||||
var count =0
|
||||
var count1 =0
|
||||
var romanNumerals = ["", "i", "ii", "iii", "iv", "v", "vi", "vii", "viii", "ix", "x"];
|
||||
function processQuestion(question, questionIndex, depth,nested) {
|
||||
// console.log('question Data')
|
||||
// console.log(question);
|
||||
|
||||
if (question.group_marks === '') {
|
||||
questionGroupMark = questionGroupMark.replace('<p id="group_marks">', '<p id="group_marks" hidden>')
|
||||
}
|
||||
|
||||
questionPaper += `<div class="text-qus-align" style="margin-left:-1px">${currentSno}) ${questionGroupmodify}${questionGroupMark}${questionGroupAttempt}</div>`
|
||||
|
||||
// questionPaper += `<div class="group_marks"></div>`;
|
||||
// questionPaper += `<div class="group_attempt_any"></div>`;
|
||||
|
||||
questionPaper += `<div style="margin-left:${description_align}px">${question.group_description}</div>`;
|
||||
depth2++
|
||||
} else if (question.question) {
|
||||
const questionTex = question.question;
|
||||
const questionText = questionTex.replace('<p>', '<p id="question_Text">');
|
||||
const questionText = questionTex.replaceAll('<p>', '<p class="question_Text">');
|
||||
console.log(questionText);
|
||||
const questionDescription = question.question_description;
|
||||
const mathstatus = question.is_math_enabled;
|
||||
const questionMark = question.marks;
|
||||
const multipleAnswer =question.question_sub_type; // this gives true or false to chaeck multiple answers or not
|
||||
// Add appropriate indentation for nested questions
|
||||
const questionIndentation = " ".repeat(depth + 1);
|
||||
console.log(questionIndentation)
|
||||
if (nested == 1) {// this adds the inside the questionGroup
|
||||
count1++;
|
||||
var romanNumeral=romanNumerals[count1];
|
||||
questionPaper += `<div class="text-qus-choice">${questionIndentation}${romanNumeral}) ${convertToLatex(questionText, mathstatus)}${questionIndentation}</div><p id="question-mark">Marks :${questionMark}</p><div class="text-des">${convertToLatex(questionDescription, mathstatus)}</div>`;
|
||||
} else {
|
||||
count++
|
||||
questionPaper += `<div class="text-qus-align">${questionIndentation}${count}) ${convertToLatex(questionText, mathstatus)}${questionIndentation}</div><p id="question-mark">Marks :${questionMark}</p><div class="text-des">${convertToLatex(questionDescription, mathstatus)}</div>`;
|
||||
var questionMark = `<p id="question-mark">Marks :${question.marks}</p>`;
|
||||
// console.log(questionMark);
|
||||
const multipleAnswer =question.question_sub_type;
|
||||
if (question.marks == '') {
|
||||
questionMark = questionMark.replace('<p id="question-mark">', '<p id="question-mark" hidden>')
|
||||
}
|
||||
|
||||
console.log(questionPaper);
|
||||
|
||||
|
||||
// If it's an MCQ question, add choices
|
||||
|
||||
// If it's an MCquestionText
|
||||
questionPaper += `<div class="text-qus-align">${currentSno}) ${convertToLatex(questionText, mathstatus)}</div>${questionMark}<div class="text-des align-right" style="margin-left:${description_align}px">${convertToLatex(questionDescription, mathstatus)}</div>`;
|
||||
|
||||
if (question.question_type === "group") {
|
||||
const answers = question.answers;
|
||||
@ -115,86 +169,24 @@ function processQuestion(question, questionIndex, depth,nested) {
|
||||
const answerA = answers[i] ? `${optionA}. ${convertToLatex(answers[i].choice_name, mathstatus)}` : '';
|
||||
// const answerB = answers[i + 1] ? `${optionB}. ${convertToLatex(answers[i + 1].choice_name, mathstatus)}` : '';
|
||||
if (multipleAnswer == 'false') {
|
||||
questionPaper += `<div class="text-option-align"><input type="radio" name="answer" value="A"> ${questionIndentation}${answerA.padEnd(10)}</div>`;
|
||||
questionPaper += `<div class="text-option-align"><input type="radio" name="answer" value="A"> ${answerA.padEnd(10)}</div>`;
|
||||
}else{
|
||||
questionPaper += `<div class="text-option-align"><input type="checkbox" name="answer" value="A"> ${questionIndentation}${answerA.padEnd(10)}</div>`;
|
||||
}
|
||||
// questionPaper += `<div class="text-option-align">${questionIndentation}${answerA.padEnd(10)}</div>`;
|
||||
// questionPaper += `<div class="text-option-align">${questionIndentation}${answerA.padEnd(10)} ${answerB}</div>`;
|
||||
questionPaper += `<div class="text-option-align"><input type="checkbox" name="answer" value="A"> ${answerA.padEnd(10)}</div>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function GroupQuestion(question, questionIndex, depth) {
|
||||
|
||||
const questionGroupSetP = `${question.group_title}`;
|
||||
const questionGroupmodify =questionGroupSetP.replace('<p>', '<p id="question-Group-Id">')
|
||||
count++
|
||||
questionPaper += `<div class="text-qus-align" style="margin-left:-1px">${count}) ${questionGroupmodify}</div>`
|
||||
|
||||
questionPaper += `<div class="group_marks"><p id="group_marks">Marks : ${question.group_marks} </p></div>`;
|
||||
questionPaper += `<div class="group_attempt_any"><p id="group_attempt_any">Attempt Any : ${question.group_attempt_any} </p></div>`;
|
||||
|
||||
questionPaper += `<div style="margin-left:20px">${question.group_description}</div>`;
|
||||
const nestedQuestions = question.questions;
|
||||
// Process nested questions in the same way
|
||||
count1 =0
|
||||
nestedQuestions.forEach((nestedQuestion) => {
|
||||
// processQuestion(nestedQuestion, questionIndex, depth);
|
||||
const nested =1;
|
||||
|
||||
CheakQnType(nestedQuestion,questionIndex,depth,nested);
|
||||
});
|
||||
}
|
||||
|
||||
// Function to recursively convert JSON to a formatted question paper
|
||||
function convertJSONToQuestionPaper(data, depth = 0, sectionIndex = 1, questionIndex = 1) {
|
||||
const sections = data.sections;
|
||||
// console.log(sections);
|
||||
// Extract the heading information
|
||||
const questionPaperTitle = data.question_paper_title;
|
||||
const questionPaperDescription = data.question_paper_description;
|
||||
if (question.questions) {
|
||||
displayQuestions(question, currentSno);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Wrap the heading elements in <div> elements with CSS for centering
|
||||
questionPaper += `<div style="text-align: center; font-weight: bolder; "><h1>${questionPaperTitle}</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) => {
|
||||
const sectionTitle = section.section_title;
|
||||
const modifiedSectionTitle = sectionTitle.replace('<p>', '<p id="sectionTitle">');//add the id for Section Title
|
||||
|
||||
const sectionAttempt = `<p id="sectionAttempt">Attempt Any : ${section.section_attempt_any}</p>`;
|
||||
const sectionMark = `<p id="sectionMark">Marks: ${section.section_marks}</p>`;
|
||||
const sectionDescription = section.section_description;
|
||||
const questions = section.questions;
|
||||
|
||||
// Add appropriate indentation for nested sections
|
||||
const indentation = " ".repeat(depth);
|
||||
|
||||
// questionPaper += `${indentation}${sectionTitle}${sectionAttempt}${sectionMark}${indentation}${sectionDescription}`;
|
||||
questionPaper += `${indentation}<hr id="horizontal">${modifiedSectionTitle}${sectionMark}${sectionAttempt}${indentation}${sectionDescription}`;
|
||||
|
||||
|
||||
// Process each question in the section
|
||||
questions.forEach((question, questionIndex) => {
|
||||
CheakQnType(question, questionIndex,depth);
|
||||
// if (CheakQnType){}
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
// Return the formatted question paper
|
||||
// console.log(questionPaper);
|
||||
return questionPaper;
|
||||
})
|
||||
}
|
||||
|
||||
// Call the function and display the formatted question paper
|
||||
const formattedQuestionPaper = convertJSONToQuestionPaper(jsonData, 0, 1, 1);
|
||||
const questionPaperElement = document.getElementById("questionPaper");
|
||||
console.log(questionPaperElement);
|
||||
questionPaperElement.innerHTML = formattedQuestionPaper; // Use innerHTML here
|
||||
}
|
||||
@ -49,6 +49,43 @@
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
.question_Text{
|
||||
inline-size: 700px;
|
||||
/* overflow-wrap: break-word;
|
||||
hyphens: manual; */
|
||||
text-wrap: wrap;
|
||||
|
||||
/* width: 700px; */
|
||||
/* inline-size: 150px; */
|
||||
/* overflow-wrap: break-word;
|
||||
inline-size: min-content;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all; */
|
||||
|
||||
}
|
||||
|
||||
#question-Group-Id{
|
||||
display: inline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#group_attempt_any{
|
||||
display: inline-flex;
|
||||
float: right;
|
||||
}
|
||||
#group_marks{
|
||||
display: inline-flex;
|
||||
float: right;
|
||||
width: 10px;
|
||||
margin-left: 35px;
|
||||
/* margin-right: -150px; */
|
||||
}
|
||||
|
||||
|
||||
hr{
|
||||
height: 2px;
|
||||
}
|
||||
@ -60,32 +97,14 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Question Group Mark */
|
||||
/* .text-qus-align{
|
||||
display: inline-flex;
|
||||
} */
|
||||
.group_attempt_any{
|
||||
display: inline-flex;
|
||||
float: right;
|
||||
margin-right: 115px;
|
||||
margin-top:-35px;
|
||||
}
|
||||
.group_marks{
|
||||
display: inline-flex;
|
||||
float: right;
|
||||
margin-top:-35px;
|
||||
margin-right: 4px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Questions Mark */
|
||||
#question_Text{
|
||||
display: inline-block;
|
||||
.question_Text{
|
||||
display: inline-flex;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#question-mark{
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
margin-right: 10px;
|
||||
float: right;
|
||||
margin-top:-25px;
|
||||
@ -93,20 +112,28 @@
|
||||
|
||||
/* Section SectionAttempt SectionMark */
|
||||
#sectionTitle{
|
||||
display: inline-block;
|
||||
inline-size: 700px;
|
||||
text-wrap: wrap;
|
||||
display: flex;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#sectionAttempt:first-of-type{
|
||||
margin-top:-27px;
|
||||
}
|
||||
#sectionAttempt{
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
margin-right: 40px;
|
||||
float: right;
|
||||
/* margin-top:-27px; */
|
||||
margin-top:-27px;
|
||||
}
|
||||
#sectinMark:first-of-type{
|
||||
margin-top:-27px;
|
||||
}
|
||||
#sectionMark{
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
margin-right: 10px;
|
||||
float: right;
|
||||
/* margin-top:-27px; */
|
||||
margin-top:-27px;
|
||||
}
|
||||
|
||||
/* End the this */
|
||||
@ -119,11 +146,15 @@
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.text-qus-align :not(p:first-child){
|
||||
display:flex;
|
||||
margin-left:30px;
|
||||
}
|
||||
/*override code */
|
||||
.MathJax.CtxtMenu_Attached_0{
|
||||
display: contents !important;
|
||||
}
|
||||
.text-qus-align{margin-left: -16px;padding-right: 250px;display:flex; }
|
||||
.text-qus-align{padding-right: 62px; }
|
||||
.text-qus-align p{ margin:0; }
|
||||
.text-des{ margin-left: 20px;margin-top: 0px;} /* Change there aadhavan top-6px*/
|
||||
.text-option-align{display:flex;margin-top: 0%;margin-left: 45px;} /* Change there aadhavan 10px*/
|
||||
@ -334,6 +365,8 @@
|
||||
console.log()
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user