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) {
    // 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) {
            // Use MathJax to convert the text to LaTeX
            const cov = MathJax.tex2chtml(text).outerHTML;
            return cov;
        } else {
            // Return the text as-is
            return text;
        }
    } else {
        // Return the text as-is
        return text;
    }
}
// Initialize the formatted question paper string
let questionPaper = "";


function CheakQnType(question, questionIndex, depth,nested) {
    const questionType = question.question_type;
    if (questionType) {
        processQuestion(question, questionIndex, depth,nested);
    }else {
        GroupQuestion(question, questionIndex, depth);
    }
    
}
var count =0    
var count1 =0
var romanNumerals = ["", "i", "ii", "iii", "iv", "v", "vi", "vii", "viii", "ix", "x"];
function processQuestion(question, questionIndex, depth,nested) {
    const questionTex = question.question;
    const questionText = questionTex.replace('<p>', '<p id="question_Text">');
    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);
    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>`;
    }
    // If it's an MCquestionText
    if (question.question_type === "group") {
        const answers = question.answers;
        const alphabetOptions = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; // Define the alphabet options

        for (let i = 0; i < answers.length; i++) { // change the i +=2 aadhavan
            const optionA = alphabetOptions[i];
            // const optionB = alphabetOptions[i + 1]; 

            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>`;
            }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>`;
        }
    }
}

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;

    

    // 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");
questionPaperElement.innerHTML = formattedQuestionPaper; // Use innerHTML here
}