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;"
// }