WordPress the_content Page Load

Question

I am creating a Quiz for WordPress in which it replaced the WordPress post content with a Quiz if you have enabled it. There are a total of 5 questions per post and to proceed further you need to answer each question one by one.

The problem I am facing is that, when ever I answer the questions, every thing works fine except the question does not appear on one page load. I always have to refresh in order to display the next question. For example, if I answer the first question, it submits the form and refreshes the page but the second question does not appear. When I hit page refresh then the second question appears. I am probably missing some wordpress thing here not sure what is it atm. Can someone please help?

CODE:

The function which alters the_content

/**
 * 
 * @param  [type] $content [description]
 * @return [type]          [description]
 */
function wp_postquiz_content( $content ) {
    global $wp_postquiz_status, $questions;;

    $user_ID = get_current_user_id();

    if ( $wp_postquiz_status == true && is_main_query() ) {

        $content = "";

        // Get the previously answered questions for all posts.
        if ( get_user_meta($user_ID, 'wp_postquiz_user_has_answered', true) )
            $answeredQuestions = get_user_meta($user_ID, 'wp_postquiz_user_has_answered', true);            

        // Check how many questions are enabled and store
        // them in an array
        $q_switch = array();
        for ($i=1; $i <= 5 ; $i++) { 
            $q_switch[] = $questions['question-' . $i . '']['q_switch'];
        } 

        // Always get the first question.
        $content .= wp_postquiz_display_question(1);    

        // Get second question if first one is answered
        if ( $q_switch[1] == 1 && isset($answeredQuestions) && in_array("post-" . get_the_ID() . "-question-1", $answeredQuestions) )
           $content .= wp_postquiz_display_question(2);

        // Get third question if second one is answered
        if ( $q_switch[2] == 1 && isset($answeredQuestions) && in_array("post-" . get_the_ID() . "-question-2", $answeredQuestions) )
            $content .= wp_postquiz_display_question(3);

        // Get fourth questino if third one is answered
        if ( $q_switch[3] == 1 && isset($answeredQuestions) && in_array("post-" . get_the_ID() . "-question-3", $answeredQuestions) )
            $content .= wp_postquiz_display_question(2);

        // Get fifth question if fourth one is answered
        if ( $q_switch[4] == 1 && isset($answeredQuestions) && in_array("post-" . get_the_ID() . "-question-4", $answeredQuestions) )
            $content .= wp_postquiz_display_question(5);


        // Store the responses if answered correctly.
        if ( isset($_POST['question-no']) ) {


            for ($i=1; $i <=5 ; $i++) { 

                if ( isset($_POST['answer-' . $i . '']) ) {

                    // Get the correct Answer
                    $q_correct_answer   = $questions['question-' . $i . '']['correct-answer']; 

                    // If answered correctly store in user meta data.
                    if ( $_POST['answer-' . $i . ''] == $q_correct_answer ) {

                        wp_postquiz_update_user_metadata( $user_ID, 'wp_postquiz_user_has_answered', "post-" . get_the_ID() . "-question-" . $i . ""); 

                    } else {

                        $content .= "Wrong Answer";

                    }

                }
            }

        }

        echo $content;

    } 
}
add_filter( 'the_content', 'wp_postquiz_content', 10, 1 );

Function for the layout of the question (wp_postquiz_display_question):

/**
 * Get Question from Database for the post
 * @param  [int] $question_no 
 * @return [string]          
 */
function wp_postquiz_display_question($question_no) {
    // Check if Post Quiz is enabled or disabled.
    global $questions;

    // Get the post id in which quis is being used.
    $postid = get_the_ID();

    // Question Details
    $q_post_content     = $questions['question-' . $question_no . '']['content']; 
    $q_question         = $questions['question-' . $question_no . '']['question'];
    $q_option_1         = $questions['question-' . $question_no . '']['options']['option-1'];
    $q_option_2         = $questions['question-' . $question_no . '']['options']['option-2'];
    $q_option_3         = $questions['question-' . $question_no . '']['options']['option-3'];
    $q_option_4         = $questions['question-' . $question_no . '']['options']['option-4'];


    // HTML to return
    $question_html = '<div class="wp-postquiz-wrapper">
            <div class="wp-postquiz content">' . $q_post_content . '</div>
            <div class="question-wrapper">
                <form method="post">    
                    <div class="wp-postquiz question">' . $q_question . '</div>
                    <div class="wp-postquiz question-options">
                        <select name="answer-' . $question_no . '">
                            <option value="A">' .  $q_option_1 . '</option>
                            <option value="B">' .  $q_option_2 . '</option>
                            <option value="C">' .  $q_option_3 . '</option>
                            <option value="D">' .  $q_option_4 . '</option>
                        </select>
                    </div>
                    <input type="hidden" name="question-no" value="' . $question_no . '">
                    <input type="hidden" name="post-id" value="' . $postid . '">
                    <input type="hidden" name="action" value="answer-submitted">
                    <input type="submit" name="submit" class="button primary" value="Answer!">
                </form>
            </div>
        </div>';

    return $question_html;
}

Answer 1

I solved the issue. Basically, in my code I was storing the data after getting the html, so I just moved the storing code above where I get the html and it worked ..