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

{% block styles %}

<style>

.tg {
    height: 100px;
    table-layout: fixed;
    width: 200px;
}

.tg td {
    height: 25px;
    text-align: left;
    vertical-align: middle;
}

input[type=radio] {
    margin-left: 4px;
    margin-top: -6px;
}

.modal {
    background-color: white;
    display: none;
    height: 100%;
    overflow: auto;
    position: fixed;
    width: 100%;
}

.modal-content {
    border: 1px solid black;
    border-radius: 5px;
    margin: auto;
    padding: 25px;
    top: 50px;
    width: 80%;
}

.close {
    color: silver;
    font-size: 25px;
    font-weight: bold;
}

.close:hover {
    color: black;
    cursor: pointer;
}

</style>

{% endblock %}

{% block title %}

Decision Situation {{ player.round_number }} of {{ Constants.num_rounds }}

{% endblock %}

{% block content %}

<center>

<img src="{% static player.problem %}" width="500px"/>

</center>

<center>

<table class="tg">
  <tr>
    <td style="width: 50px"> </td>
    <td style="width: 25px"> {{ form.submitted_choice.0.tag }} </td>
    <td style="width: 125px"> {{ player.word1 }} </td>
  </tr>
  <tr>
    <td style="width: 50px"> </td>
    <td style="width: 25px"> {{ form.submitted_choice.1.tag }} </td>
    <td style="width: 125px"> {{ player.word2 }} </td>
  </tr>
  <tr>
    <td style="width: 50px"> </td>
    <td style="width: 25px"> {{ form.submitted_choice.2.tag }} </td>
    <td style="width: 125px"> {{ player.word3 }} </td>
  </tr>
  <tr>
    <td style="width: 50px"> </td>
    <td style="width: 25px"> {{ form.submitted_choice.3.tag }} </td>
    <td style="width: 125px"> {{ player.word4 }} </td>
  </tr>
</table>

</center>

<br />
<br />

<button class="btn btn-primary btn-large" onclick="openModal()" style="background-color: silver; border: 1px solid silver; float: left" type="button"> Dictionary </button>
<button class="btn btn-primary btn-large" onclick="saveData()" style="float: right"> Next </button>

<input id="submitted_time" name="submitted_time" type="hidden" value=""/>

<!-- Dictionary -->

<div class="modal" id="modal">

<div class="modal-content">

<span class="close" onclick="closeModal()"> &times; </span>

<br />

<p align="justify">
ACCUSING: blaming <br />
The policeman was <b> accusing </b> the man of stealing a wallet.
</p>

<p align="justify">
AFFECTIONATE: showing fondness towards someone <br />
Most mothers are <b> affectionate </b> to their babies by giving them lots of kisses and cuddles.
</p>

<p align="justify">
AGHAST: horrified, astonished <br />
Jane was <b> aghast </b> when she discovered her house had been burgled.
</p>

<p align="justify">
ALARMED: fearful, worried, filled with anxiety <br />
Claire was <b> alarmed </b> when she thought she was being followed home.
</p>

<p align="justify">
AMUSED: finding something funny <br />
I was <b> amused </b> by a funny joke someone told me.
</p>

<p align="justify">
ANNOYED: irritated, displeased <br />
Jack was <b> annoyed </b> when he found out he had missed the last bus home.
</p>

<p align="justify">
ANTICIPATING: expecting <br />
At the start of the football match, the fans were <b> anticipating </b> a quick goal.
</p>

<p align="justify">
ANXIOUS: worried, tense, uneasy <br />
The student was feeling <b> anxious </b> before taking her final exams.
</p>

<p align="justify">
APOLOGETIC: feeling sorry <br />
The waiter was very <b> apologetic </b> when he spilt soup all over the customer.
</p>

<p align="justify">
ARROGANT: conceited, self-important, having a big opinion of oneself <br />
The <b> arrogant </b> man thought he knew more about politics than everyone else in the room.
</p>

<p align="justify">
ASHAMED: overcome with shame or guilt <br />
The boy felt <b> ashamed </b> when his mother discovered him stealing money from her purse.
</p>

<p align="justify">
ASSERTIVE: confident, dominant, sure of oneself <br />
The <b> assertive </b> woman demanded that the shop give her a refund.
</p>

<p align="justify">
BAFFLED: confused, puzzled, dumbfounded <br />
The detectives were completely <b> baffled </b> by the murder case.
</p>

<p align="justify">
BEWILDERED: utterly confused, puzzled, dazed <br />
The child was <b> bewildered </b> when visiting the big city for the first time.
</p>

<p align="justify">
BORED: weary and restless through lack of interest <br />
On days when few customers came to the shop, Bob felt <b> bored</b>.
</p>

<p align="justify">
CAUTIOUS: careful, wary <br />
Sarah was always a bit <b> cautious </b> when talking to someone she did not know.
</p>

<p align="justify">
COMFORTING: consoling, compassionate <br />
The nurse was <b> comforting </b> the wounded soldier.
</p>

<p align="justify">
CONCERNED: worried, troubled <br />
The doctor was <b> concerned </b> when his patient took a turn for the worse.
</p>

<p align="justify">
CONFIDENT: self-assured, believing in oneself <br />
The tennis player was feeling very <b> confident </b> about winning his match.
</p>

<p align="justify">
CONFUSED: puzzled, perplexed <br />
Lizzie was so <b> confused </b> by the directions given to her, she got lost.
</p>

<p align="justify">
CONTEMPLATIVE: reflective, thoughtful, considering <br />
John was in a <b> contemplative </b> mood on the eve of his 60th birthday.
</p>

<p align="justify">
CONTENTED: satisfied <br />
After a good meal, David felt very <b> contented</b>.
</p>

<p align="justify">
CONVINCED: certain, absolutely positive <br />
Richard was <b> convinced </b> he had come to the right decision.
</p>

<p align="justify">
CURIOUS: inquisitive, inquiring, prying <br />
Louise was <b> curious </b> about the strangely shaped parcel.
</p>

<p align="justify">
DECIDING: making your mind up <br />
The man was <b> deciding </b> whom to vote for in the election.
</p>

<p align="justify">
DECISIVE: already made your mind up <br />
Jane looked very <b> decisive </b> as she walked into the polling station.
</p>

<p align="justify">
DEFIANT: insolent, bold, don't care what anyone else thinks <br />
The animal protester remained <b> defiant </b> even after being sent to prison.
</p>

<p align="justify">
DEPRESSED: miserable <br />
George was <b> depressed </b> when he didn't receive any birthday cards.
</p>

<p align="justify">
DESIRE: passion, lust, longing for <br />
Kate had a strong <b> desire </b> for chocolate.
</p>

<p align="justify">
DESPONDENT: gloomy, despairing, without hope <br />
Gary was <b> despondent </b> when he did not get the job he wanted.
</p>

<p align="justify">
DISAPPOINTED: displeased, disgruntled <br />
Manchester United fans were <b> disappointed </b> not to win the Championship.
</p>

<p align="justify">
DISPIRITED: glum, miserable, low <br />
Adam was <b> dispirited </b> when he failed his exams.
</p>

<p align="justify">
DISTRUSTFUL: suspicious, doubtful, wary <br />
The old woman was <b> distrustful </b> of the stranger at her door.
</p>

<p align="justify">
DOMINANT: commanding, bossy <br />
The sergeant major looked <b> dominant </b> as he inspected the new recruits.
</p>

<p align="justify">
DOUBTFUL: dubious, suspicious, not really believing <br />
Mary was <b> doubtful </b> that her son was telling the truth.
</p>

<p align="justify">
DUBIOUS: doubtful, suspicious <br />
Peter was <b> dubious </b> when offered a surprisingly cheap television in a pub.
</p>

<p align="justify">
EAGER: keen <br />
On Christmas morning, the children were <b> eager </b> to open their presents.
</p>

<p align="justify">
EARNEST: having a serious intention <br />
Harry was very <b> earnest </b> about his religious beliefs.
</p>

<p align="justify">
EMBARRASSED: ashamed <br />
After forgetting a colleague's name, Jenny felt very <b> embarrassed</b>.
</p>

<p align="justify">
ENCOURAGING: hopeful, heartening, supporting <br />
All the parents were <b> encouraging </b> their children in the school sports day.
</p>

<p align="justify">
ENTERTAINED: absorbed and amused or pleased by something <br />
I was very <b> entertained </b> by the magician.
</p>

<p align="justify">
ENTHUSIASTIC: very eager, keen <br />
Susan felt very <b> enthusiastic </b> about her new fitness plan.
</p>

<p align="justify">
EXCITED: very enthusiastic and eager <br />
The children were too <b> excited </b> to sleep.
</p>

<p align="justify">
FANTASIZING: daydreaming <br />
Emma was <b> fantasizing </b> about being a film star.
</p>

<p align="justify">
FASCINATED: captivated, really interested <br />
At the seaside, the children were <b> fascinated </b> by the creatures in the rock pools.
</p>

<p align="justify">
FEARFUL: terrified, worried <br />
In the dark streets, the women felt <b> fearful</b>.
</p>

<p align="justify">
FLIRTATIOUS: brazen, saucy, teasing, playful <br />
Connie was accused of being <b> flirtatious </b> when she winked at a stranger at a party.
</p>

<p align="justify">
FLUSTERED: confused, nervous and upset <br />
Sarah felt a bit <b> flustered </b> when she realised how late she was for the meeting and that she had forgotten an important document.
</p>

<p align="justify">
FRIENDLY: sociable, amiable <br />
The <b> friendly </b> girl showed the tourists the way to the town centre.
</p>

<p align="justify">
GRATEFUL: thankful <br />
Kelly was very <b> grateful </b> for the kindness shown by the stranger.
</p>

<p align="justify">
GUILTY: feeling sorry for doing something wrong <br />
Charlie felt <b> guilty </b> about having an affair.
</p>

<p align="justify">
HATEFUL: showing intense dislike <br />
The two sisters were <b> hateful </b> to each other and always fighting.
</p>

<p align="justify">
HOPEFUL: optimistic <br />
Larry was <b> hopeful </b> that the post would bring good news.
</p>

<p align="justify">
HORRIFIED: terrified, appalled <br />
The man was <b> horrified </b> to discover that his new wife was already married.
</p>

<p align="justify">
HOSTILE: unfriendly <br />
The two neighbours were <b> hostile </b> towards each other because of an argument about loud music.
</p>

<p align="justify">
IMPATIENT: restless, wanting something to happen soon <br />
Jane grew increasingly <b> impatient </b> as she waited for her friend who was already 20 minutes late.
</p>

<p align="justify">
IMPLORING: begging, pleading <br />
Nicola looked <b> imploring </b> as she tried to persuade her dad to lend her the car.
</p>

<p align="justify">
INCREDULOUS: not believing <br />
Simon was <b> incredulous </b> when he heard that he had won the lottery.
</p>

<p align="justify">
INDECISIVE: unsure, hesitant, unable to make your mind up <br />
Tammy was so <b> indecisive </b> that she couldn't even decide what to have for lunch.
</p>

<p align="justify">
INDIFFERENT: disinterested, unresponsive, don't care <br />
Terry was completely <b> indifferent </b> as to whether they went to the cinema or the pub.
</p>

<p align="justify">
INSISTING: demanding, persisting, maintaining <br />
After a work outing, Frank was <b> insisting </b> he paid the bill for everyone.
</p>

<p align="justify">
INSULTING: rude, offensive <br />
The football crowd was <b> insulting </b> the referee after he gave a penalty.
</p>

<p align="justify">
INTERESTED: inquiring, curious <br />
After seeing Jurassic Park, Hugh grew very <b> interested </b> in dinosaurs.
</p>

<p align="justify">
INTRIGUED: very curious, very interested <br />
A mystery phone call <b> intrigued </b> Zoe.
</p>

<p align="justify">
IRRITATED: exasperated, annoyed <br />
Frances was <b> irritated </b> by all the junk mail she received.
</p>

<p align="justify">
JEALOUS: envious <br />
Tony was <b> jealous </b> of all the taller, better-looking boys in his class.
</p>

<p align="justify">
JOKING: being funny, playful <br />
Gary was always <b> joking </b> with his friends.
</p>

<p align="justify">
NERVOUS: apprehensive, tense, worried <br />
Just before her job interview, Alice felt very <b> nervous</b>.
</p>

<p align="justify">
OFFENDED: insulted, wounded, having hurt feelings <br />
When someone made a joke about her weight, Martha felt very <b> offended</b>.
</p>

<p align="justify">
PANICKED: distraught, feeling of terror or anxiety <br />
On waking to find the house on fire, the whole family was <b> panicked</b>.
</p>

<p align="justify">
PENSIVE: thinking about something slightly worrying <br />
Susie looked <b> pensive </b> on the way to meeting her boyfriend's parents for the first time.
</p>

<p align="justify">
PERPLEXED: bewildered, puzzled, confused <br />
Frank was <b> perplexed </b> by the disappearance of his garden gnomes.
</p>

<p align="justify">
PLAYFUL: full of high spirits and fun <br />
Neil was feeling <b> playful </b> at his birthday party.
</p>

<p align="justify">
PREOCCUPIED: absorbed, engrossed in one's own thoughts <br />
Worrying about her mother's illness made Debbie <b> preoccupied </b> at work.
</p>

<p align="justify">
PUZZLED: perplexed, bewildered, confused <br />
After doing the crossword for an hour, June was still <b> puzzled </b> by one clue.
</p>

<p align="justify">
REASSURING: supporting, encouraging, giving someone confidence <br />
Andy tried to look <b> reassuring </b> as he told his wife that her new dress did suit her.
</p>

<p align="justify">
REFLECTIVE: contemplative, thoughtful <br />
George was in a <b> reflective </b> mood as he thought about what he'd done with his life.
</p>

<p align="justify">
REGRETFUL: sorry <br />
Lee was always <b> regretful </b> that he had never travelled when he was younger.
</p>

<p align="justify">
RELAXED: taking it easy, calm, carefree <br />
On holiday, Pam felt happy and <b> relaxed</b>.
</p>

<p align="justify">
RELIEVED: freed from worry or anxiety <br />
At the restaurant, Ray was <b> relieved </b> to find that he had not forgotten his wallet.
</p>

<p align="justify">
RESENTFUL: bitter, hostile <br />
The businessman felt very <b> resentful </b> towards his younger colleague who had been promoted above him.
</p>

<p align="justify">
SARCASTIC: cynical, mocking, scornful <br />
The comedian made a <b> sarcastic </b> comment when someone came into the theatre late.
</p>

<p align="justify">
SATISFIED: content, fulfilled <br />
Steve felt very <b> satisfied </b> after he had got his new flat just how he wanted it.
</p>

<p align="justify">
SCEPTICAL: doubtful, suspicious, mistrusting <br />
Patrick looked <b> sceptical </b> as someone read out his horoscope to him.
</p>

<p align="justify">
SERIOUS: solemn, grave <br />
The bank manager looked <b> serious </b> as he refused Nigel an overdraft.
</p>

<p align="justify">
SHY: timid <br />
Nick was painfully <b> shy </b> as a teenager.
</p>

<p align="justify">
STERN: severe, strict, firm <br />
The teacher looked very <b> stern </b> as he told the class off.
</p>

<p align="justify">
SUSPICIOUS: disbelieving, suspecting, doubting <br />
After Sam had lost his wallet for the second time at work, he grew <b> suspicious </b> of one of his colleagues.
</p>

<p align="justify">
SYMPATHETIC: kind, compassionate <br />
The nurse looked <b> sympathetic </b> as she told the patient the bad news.
</p>

<p align="justify">
TENTATIVE: hesitant, uncertain, cautious <br />
Andrew felt a bit <b> tentative </b> as he went into the room full of strangers.
</p>

<p align="justify">
TERRIFIED: alarmed, fearful <br />
The boy was <b> terrified </b> when he thought he saw a ghost.
</p>

<p align="justify">
THOUGHTFUL: thinking about something <br />
Phil looked <b> thoughtful </b> as he sat waiting for the girlfriend he was about to finish with.
</p>

<p align="justify">
THREATENING: menacing, intimidating <br />
The large, drunken man was acting in a very <b> threatening </b> way.
</p>

<p align="justify">
UNEASY: unsettled, apprehensive, troubled <br />
Karen felt slightly <b> uneasy </b> about accepting a lift from the man she had only met that day.
</p>

<p align="justify">
UPSET: agitated, worried, uneasy <br />
The man was very <b> upset </b> when his mother died.
</p>

<p align="justify">
WORRIED: anxious, fretful, troubled <br />
When her cat went missing, the girl was very <b> worried</b>.
</p>

</div>

</div>

{% endblock %}

{% block scripts %}

<script>

var initTime = new Date().getTime();

function saveData() {

    var newTime = (new Date().getTime() - initTime) / 1000.;
    document.getElementById("submitted_time").value = newTime;

}

function openModal() {

    modal.style.display = "block";

}

function closeModal() {

    modal.style.display = "none";

}

var modal = document.getElementById("modal");
window.onclick = function(event) {

    if (event.target == modal) {
        modal.style.display = "none";
    }

}

</script>

{% endblock %}