Vfrdtyky

I am developing a guess the answer from an image game for a project. The images and correct answers are stored in a list in a json file. The images are randomly rendered on the game page, where the player inputs their answer. I am trying to find a way to compare the users answers with the randomly generated image. Below are some of the items in the list

{

"players": [



{

    "image_source": "static/img/portfolio/neymar.jpg",

    "answer": "Neymar"

},



{

    "image_source": "static/img/portfolio/hugo_lloris.jpg",

    "answer": Lloris"

},



{

    "image_source": "static/img/portfolio/lorenzo_insigne.jpg",

    "answer": "Insigne"

}

The user enters the answer in a form on the html page. As the images are randomly generated this is not as straight forward as I hoped.

My initial attempt uses Jinja and hidden forms:

<img class="img-fluid" {{ loop.index }}. src="{{ player.image_source }}" alt="player image">

     <form method="POST">

         <div class="control-group">

            <div class="hidden_form">

                <textarea rows="1" 

                 id="question_number" name="question_number" 

                 type="hidden" value="{{ loop.index }}">

                </textarea>

            </div>

            <div class="hidden_form">

               <textarea rows="1" 

                id="answer" name="answer" 

                type="hidden" value="{{ player.answer }}">

               </textarea>

            </div>

            <div class="form-group 

            floating-label-form-group answers controls pb-2">

                <textarea rows="1" class="form-control" 

                 id="user_answer" name="user_answer" 

                 type="text" placeholder="Enter Answer" 

                 required="required" 

                 data-validation-required-message="Please enter your answer.">

                </textarea>

            </div>

However, I would like to avoid using the hidden forms as I find this a little messy.

My Python code is:

@app.route('/play', methods = ['GET', 'POST'])

def answers():

    if session:

        if request.method == "POST":

            session['question_number'] +=1

            session['guess'] = request.form.get("user_answer")

            session['correct_answer'] = request.form.get("answer")

            if session['guess'] == session['correct_answer']:

                flash('Correct!')

            else:

                flash('Incorrect, please try again or skip to the next question')