{% extends "courses/course.html" %}
{% load staticfiles %}
{% load main_extras %}

{% block exercise_head %}
<style type="text/css">

#exercise-choices .list-group-item input {
	margin-top: 0px;
	margin-right: 0.5em;
	position: relative;
	top: 0.2em;
}


#exercise-choices .list-group-item-success {
	color: 	#555555;
	background-color: rgba(59, 255, 138, 0.3);
	outline: 0;
}


#exercise-choices .list-group-item-success:hover {
	color: 	#555555;
	background-color: rgba(59, 255, 138, 0.2);
	outline: 0;
}



#exercise-choices .list-group-item-userchoice {
	color: 	#555555;
	background-color: rgba(59, 255, 138, 0.3);
	outline: 0;
}


#exercise-choices .list-group-item-userchoice:hover {
	color: 	#555555;
	background-color: rgba(59, 255, 138, 0.2);
	outline: 0;
}

</style>
{% endblock %}

{% block exercise_content %}
{{ slide.content |safe }}

<div id="exercise-choices">
<h4>{{ slide_data.question }}</h4>

<div class="list-group">

{% for choice in slide_data.choices|shuffle %}<a href="#" class="list-group-item"><input type="{{ slide_data.input_type }}" name="solution" value="{{ choice.value }}">{{ choice.text|safe }}</a>
{% endfor %}
</div>


<!--

<h4>What types of programming languages do you know?</h4>

<div class="list-group">
  <a href="#" class="list-group-item"><input type="checkbox"> asdlhf asdfhl sdfahlsdfhl asdfl </a>
  <a href="#" class="list-group-item"><input type="checkbox"> asjdfjöasdjö a ösdfjköasö dfjkö asdfjö ajösd</a>
  <a href="#" class="list-group-item"><input type="checkbox"> asdhlf askdjfh asjldasbdfjlkadfvasdfjkha sdfh asdlhf asdfhl asdfl </a>
</div>


<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2"><b>2 + 5 = </b></span>
  <input type="text" class="form-control" placeholder="Your answer." aria-describedby="sizing-addon2">
</div>

-->





</div><!-- #exercise-choices -->
{% endblock %}







{% block exercise_response %}
<!-- empty output for quizzes -->
{% endblock %}