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(text);
        // 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;
    
           var title = removeHtmlTags(questionPaperTitle)
    
        // 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.section_attempt_any) {
                var sectionAttempt = `<p id="sectionAttempt">Attempt Any : ${section.section_attempt_any}</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.section_display_marks;
                    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);
        var dataa =data.questions;
        dataa.forEach((question, index) =>{


            var currentSno = parentSno + (index + 1) + '.';
            var temp_sno= currentSno.slice(0,-1)

            var  currentSno_length =currentSno.length-(currentSno.length/2)
          if (currentSno_length == 1) {
            description_align =27
          } else if (currentSno_length == 2) {
            description_align =33
          }else if(currentSno_length == 3){
            description_align =48
          }else if(currentSno_length == 4) {
            description_align =62
          }
          else if(currentSno_length == 5) {
            description_align =78
          }

          
          var GroupQuestionTilteAlign = 0;
                 if (question.group_title) {
                    let cleanedTex = question.question_id.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.group_attempt_any) {
                        var  questionGroupAttempt = `<p id="group_attempt_any" class="GroupAttempAny">Attempt Any : ${question.group_attempt_any} </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.group_display_marks;
                    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="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>`;
                    depth2++
                } else if (question.question) {

                    let cleanedTex = question.questionId.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;
                    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.is_math_enabled;
                    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.display_marks

                    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, mathstatus)}</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;
                        var answerId  =question.question_id;
                        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
                            } else if (currentSno_length1 == 2) {
                                choisealgin =25
                        }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
                            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">')
                            
                            const answerA = answers[i] ? `${optionA}. ${convertToLatex(answers[i].choice_name, math)}` : '';
                            // const answerB = answers[i + 1] ? `${optionB}. ${convertToLatex(answers[i + 1].choice_name, mathstatus)}` : '';
                            if (multipleAnswer == 'false') {
                                questionPaper += `<div class="text-option-align" style="margin-left:${choisealgin}px"><input type="radio" name="answer" value="A"> <p class="ChoiceOption">${answerA.padEnd(10)}</p></div>`;
                            }else{
                                questionPaper += `<div class="text-option-align" style="margin-left:${choisealgin}px"><input type="checkbox" name="answer" value="A">  <p class="ChoiceOption">  ${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;
    }
}