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 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 {
            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>')
                    } 
        
                    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.replaceAll('<p>', '<p class="question_Text">');
                    console.log(questionText);
                    const questionDescription = question.question_description;
                    const mathstatus = question.is_math_enabled;
                    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>')
                    }

                    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;
                        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"> ${answerA.padEnd(10)}</div>`;
                            }else{
                                questionPaper += `<div class="text-option-align"><input type="checkbox" name="answer" value="A">    ${answerA.padEnd(10)}</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
    }