{% extends "base-preview.html" %} 
{% load i18n %} 
{% load display_functions %} 

{% block extra_styles %}
	<link href="{{ STATIC_URL }}oppia/preview/default.css" rel="stylesheet"/>
{% endblock extra_styles %}

{% block extra_scripts %}
<script>
$( document ).ready(function() {
	$('[name=reveal]').each(function(i){
		$('#answer'+$(this).attr('id')).toggle();
		$(this).click(function() {
			$('#answer'+$(this).attr('id')).toggle("blind", 1000 );
			$(this).hide();
		});
		}
	);
});
</script>
{% endblock extra_scripts %} 

{% block content %}
{% if course %}
	<h3><a href="{% url 'oppia_preview_course_home' course.id %}">{{ course.title|title_lang:LANGUAGE_CODE }}</a></h3>
{% endif %}

{% if activity %}

	<div class="row">
		{% if activity.get_previous_activity %}	
			<div class="pull-left btn-primary btn btn-default"><a href="{% url 'oppia_preview_course_activity' course.id activity.get_previous_activity.id %}">&lt;&lt; Previous</a></div>
		{% endif %}
		{% if activity.get_next_activity %}	
			<div class="pull-right btn-primary btn btn-default"><a href="{% url 'oppia_preview_course_activity' course.id activity.get_next_activity.id %}">Next &gt;&gt;</a></div>
		{% endif %}
	</div>
	<h3>{{ activity.section.title|title_lang:LANGUAGE_CODE }} &gt; {{ activity.title|title_lang:LANGUAGE_CODE }}</h3>
	<div id="oppia-content">
		{{ content | safe }}
	</div>
	<div class="row" style="margin-top:50px">
		{% if activity.get_previous_activity %}	
			<div class="pull-left btn-primary btn btn-default"><a href="{% url 'oppia_preview_course_activity' course.id activity.get_previous_activity.id %}">&lt;&lt; Previous</a></div>
		{% endif %}
		{% if activity.get_next_activity %}	
			<div class="pull-right btn-primary btn btn-default"><a href="{% url 'oppia_preview_course_activity' course.id activity.get_next_activity.id %}">Next &gt;&gt;</a></div>
		{% endif %}
	</div>
	
{% endif %}

{% endblock %}