{% extends "global/Page.html" %}

{% block title %}Introduction{% endblock %}
{% block content %}
<style>
        #start-game-button {
        background-color: #4CAF50;
        color: white;
        border: none;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    }
</style>

    <h3>
        Example
    </h3>
    <p>
       You are wrong. The answer is 7%.<br>
        Since your score was high enough to be accepted, You will play the lottery for being accepted.<br>
        The red boxed lottery is the one you will be playing, which tells you there is 7% chance of winning.
    </p>

       <div style="display: inline-block;width: 60%;margin-right: -10%">

                    <img  src="{{ static 'histogram/Quiz2Wrong.png' }}" width="90%"/>
        </div>


    <button id="start-game-button" class="btn btn-primary">Retake the Quiz</button>

{% endblock %}