0

I would like to add a quiz page template to my WordPress site. Part of the template is the code below. The problem is that when any of the inputs is selected, the checked attribute is missing.

<div id="primary" class="content-area">
    <main id="page-main" class="site-main">
        <div class="container">
            <div id="question-container">
                <?php
                // Get the quiz questions from the custom post type
                $questions = get_posts([
                        'post_type' => 'driving-question',
                        'meta_key' => 'qlang',
                        'meta_value' => '1',
                        'orderby' => 'rand',
                        'numberposts' => 5,
                    ]);

                // Create variables to store the user's score and correct and wrong answers
                $questionNum = 0;

                // Display the quiz questions
                foreach ($questions as $question)
                {

                    $questionNum++;
                    $qCod = get_post_meta($question->ID, 'qcod', true);
                    $photoName = get_post_meta($question->ID, 'qphoto', true);
                    $photoName = strtoupper($photoName);
                    $photoPath = home_url().'/wp-content/uploads/2023/10/'.$photoName.'.jpg';
                    $answerFirst = get_post_meta($question->ID, 'answer_text_1', true);
                    $answerFirstCorrect = get_post_meta($question->ID, 'answer_correct_1', true);
                    $answerFirstCode = get_post_meta($question->ID, 'answer_code_1', true);
                    $answerSecond = get_post_meta($question->ID, 'answer_text_2', true);
                    $answerSecondCorrect = get_post_meta($question->ID, 'answer_correct_2', true);
                    $answerSecondCode = get_post_meta($question->ID, 'answer_code_2', true);
                    $answerThird = get_post_meta($question->ID, 'answer_text_3', true);
                    $answerThirdCorrect = get_post_meta($question->ID, 'answer_correct_3', true);
                    $answerThirdCode = get_post_meta($question->ID, 'answer_code_3', true);

                    echo '<div id="question-'.$questionNum.'" class="question">';
                    if ($photoName != 0) {
                        echo '<img src="'.$photoPath.'" width="200">';
                    }
                    echo '<h4>'. $questionNum .'. '. $question->post_title . '</h4>'; ?>
                <form>
                    <?php
                    if ($answerFirst) echo '<input class="answer" type="radio" name="a'.$questionNum.'" value="'.$answerFirstCorrect.'" id="correctString1"> <label for="correctString1">'." ".$answerFirst.'</label><br>';
                    if ($answerSecond) echo '<input class="answer" type="radio" name="a'.$questionNum.'" value="'.$answerSecondCorrect.'" id="correctString2"> <label for="correctString2">'." ".$answerSecond.'</label><br>';
                    if ($answerThird) echo '<input class="answer" type="radio" name="a'.$questionNum.'" value="'.$answerThirdCorrect.'" id="correctString3"> <label for="correctString3">'." ".$answerThird.'</label>';
                    ?>
                </form>
                <div class="question-buttons" id="<?php echo 'question-buttons-'.$questionNum; ?>">
                    <button class="okImage buttonImage" id="<?php echo 'okImage-'.$questionNum; ?>">
                        <img class="shadow handcursor" id="<?php echo 'okImg-'.$questionNum; ?>" src="../wp-content/uploads/2023/10/epibebaiwsh-back.jpg" alt="σήματα οδικής κυκλοφορίασ">
                    </button>
                    <button class="nextImage buttonImage" id="<?php echo 'nextImage-'.$questionNum; ?>">
                        <img class="shadow handcursor" id="<?php echo 'nextImg-'.$questionNum; ?>" src="../wp-content/uploads/2023/10/epomenh-erwt.jpg" alt="test online">
                    </button>
                </div>
            </div>
            <?php
                }
                ?>
        </div>
    </main>
</div>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.