Как конвертировать результат jquery викторины в pdf при нажатии?

Question

Я пытаюсь создать тест jquery, я хочу, чтобы пользователь загружал результат в формате pdf при нажатии, после поиска в Google я обнаружил, что мне следует использовать библиотеку dom pdf для преобразования HTML в pdf.

Вот рабочая демонстрационная викторина Демо-викторина

Вот мое решение.

HTML

<div id="wrapper">
        <div id="quiz">
            <div id="questions">This is a quiz about Turkey, click start to begin
                <div id="start">Start</div>
            </div>
            <div name="answersFrame" id="answersFrame" class="choices">
                <input type="radio" name="answers" class="choices" value=0>
                <p id="zero" class="pickone"></p>
                <br/>
                <input type="radio" name="answers" class="choices" value=1>
                <p id="one" class="pickone"></p>
                <br/>
                <input type="radio" name="answers" class="choices" value=2>
                <p id="two" class="pickone"></p>
                <br/>
                <input type="radio" name="answers" class="choices" value=3>
                <p id="three" class="pickone"></p>
            </div>
            <div id="next">next</div>
        </div>
        <div id="table">
            <div id="score"></div>
            <table id="results">
                <thead>
                    <tr>
                        <th>Question</th>
                        <th>Your Answer</th>
                        <th>Correct Answer</th>
                </thead>
                <tbody>
                    <tr class="row" name=0>
                        <td>Turkey's capital</td>
                        <td>
                            <p class="userAnswer" value=0></p>
                        </td>
                        <td>
                            <p class="correctAnswer" value=0></p>
                        </td>
                    </tr>
                    <tr class="row" name=1>
                        <td>Turkey's founding date</td>
                        <td>
                            <p class="userAnswer" value=1></p>
                        </td>
                        <td>
                            <p class="correctAnswer" value=1></p>
                        </td>
                    </tr>
                    <tr class="row" name=2>
                        <td>Turkey's population</td>
                        <td>
                            <p class="userAnswer" value=2></p>
                        </td>
                        <td>
                            <p class="correctAnswer" value=2></p>
                        </td>
                    </tr>
                    <tr class="row" name=3>
                        <td>Istanbul's population</td>
                        <td>
                            <p class="userAnswer" value=3></p>
                        </td>
                        <td>
                            <p class="correctAnswer" value=3></p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <button class="getResult">Result </button>

Вот js

var quiz = [{
    question: "What is the capital of Turkey?",
    answers: ["Istanbul", "Ankara", "Izmir", "Trabzon"],
    correctAnswer: 1
}, {
    question: "When was Turkey established?",
    answers: [1923, 1928, 1933, 1934],
    correctAnswer: 0
}, {
    question: "What is the population of Turkey?",
    answers: ["90 million", "75 million", "100 million", "80 million"],
    correctAnswer: 1
}, {
    question: "What is the population of Turkey's biggest city, Istanbul?",
    answers: ["18 million", "16 million", "14 million", "7 million"],
    correctAnswer: 2
}]

var i = 0;
var score = 0;

$(document).ready(function () {
    $('#start').on('click', function () {
        $('#questions').text(quiz[i].question);
        $('#zero').text(quiz[i].answers[0]);
        $('#one').text(quiz[i].answers[1]);
        $('#two').text(quiz[i].answers[2]);
        $('#three').text(quiz[i].answers[3]);
        $('#start').remove();
        $('.choices').show('slow');
        $('#next').show('slow');
    });
});

$(document).ready(function () {
    $(document).on('click', '#next', function () {
        var answer = $('input[name="answers"]:checked').val();
        var answerString = quiz[i].answers[answer];
        $('p[class="userAnswer"][value=' + i + ']').text(answerString);
        var correctAnswer = quiz[i].correctAnswer;
        $('p[class="correctAnswer"][value=' + i + ']').text(quiz[i].answers[correctAnswer]);
        if (answer == quiz[i].correctAnswer) {
            score++;
        } else {
            $('tr[class="row"][name=' + i + ']').css('background', '#FE2E64');
        }
        if (!$('input[name="answers"]').is(':checked')) {
            alert("please make a choice");
            return undefined; //stops executing the rest of the code
        }
        i++;

        if (i < 4) {
            $('.choices').css('display', 'none');
            $('#questions').text(quiz[i].question);
            $('#zero').text(quiz[i].answers[0]);
            $('#one').text(quiz[i].answers[1]);
            $('#two').text(quiz[i].answers[2]);
            $('#three').text(quiz[i].answers[3]);
            $('.choices').show('slow');
            $('input[name="answers"]').prop('checked', false);

        }
        if (i > 3) {

            $('#quiz').remove();
            $('#score').text("You have completed the quiz, your score is " + score);//score*(100/i)
            $('.getResult').addClass('show');
            $('#results').fadeIn('fast');
        }

        $('.getResult').on('click', function(){
            window.open('getpdf.php', '_blank')
        })


    });
});

, а вот мой PHP скрипт для преобразования HTML в pdf

<?php
    // Include autoloader 
    require_once 'dompdf/autoload.inc.php'; 
    
    // Reference the Dompdf namespace 
    use Dompdf\Dompdf; 
    use Dompdf\Options;

    $options = new Options();
    $options->set('defaultFont', 'Courier');

    // Instantiate and use the dompdf class 
    $dompdf = new Dompdf($options);

    // Load content from html file 
    $html = file_get_contents("index.html"); 
    $dompdf->loadHtml($html); 
    
    // (Optional) Setup the paper size and orientation 
    $dompdf->setPaper('A4', 'potrait'); 
    $dompdf->set_option('isHtml5ParserEnabled', true);
    
    // Render the HTML as PDF
    $dompdf->render();

        // Output the generated PDF to Browser
    $dompdf->stream();

?>

Мое решение не работает, он не загружает текущую результат, он загружает элементы, которые не создаются динамически, в дом.

Теперь я хочу, чтобы когда пользователь нажимал кнопку result, загружал результаты в файл pdf.

Что мне делать нужно изменить, чтобы это работало? любая идея или решение будут оценены

Answer 1

Я думаю, что синтаксический анализатор dompdf не может обработать js, и если это так, он не знает ответов, выбранных пользователем (вы можете проверить это, выведя то, что вы используете для подачи domPdf). Так что лучше было бы просто отправить ответы на php скрипт и позволить ему сгенерировать html pdf, который вы затем можете отправить в dompdf для создания pdf.