riddle-g-setting.html

{% extends "base.html" %} 

{% block css %}
  <style>
	#tries {
		display: none;
	}
	.form-control,
	select {
		padding: 1rem;
		border-top: 0;
		border-right: 0;
		border-bottom: 1px solid;
		border-left: 0;
		border-radius: 0;
	}
  </style>
{% endblock css %}

{% block main_content %}



<div class="container">
	<div class="card-deck">
		<div class="card my-5">
			<div class="card-header text-center font-weight-bold">Game rules</div>
			<div class="card-body">
				<ul>
					<li>
						<p class="font-weight-bold"> Please name your profile first</p>
						<p>(you can have as many game profiles as you wish as long as the profile names are unique)</p>
					</li>
					<li>
						<p class="font-weight-bold"> Then please select question category</p>
					</li>
					<li>
						<ul>
							<p class="font-weight-bold"> Modes</p>
							<li>With
								<span class="text-green font-weight-bold">Endless</span> mode you can answer wrongly as many times as you wish, however your wrong answers will be recorded!</li>
							<li>On other hand you can choose to play with limited tries. Select
								<span class="text-red font-weight-bold">Limited tries</span> if you want to get more stressed
								<i class="text-green font-weight-bold fa fa-smile-o"></i>
				
								<ul>
									<li class="font-weight-bold">You must select how many tries you wish to have with this mode!</li>
								</ul>
							</li>
						</ul>
					</li>
					<br>
					<li>
						<ul>
							<p class="font-weight-bold">Additional info</p>
							<li>You can
								<span class="text-yellow font-weight-bold">Skip</span> question as many times as you wish, which will not effect your overall score, however
								<span class="text-yellow font-weight-bold">Skipped</span> questions are recorded!
							</li>
							<li>You can also
								<span class="text-red font-weight-bold">Delete</span> question from the game, however this will effect your overall score!
							</li>
				
						</ul>
					</li>
				</ul>
			</div>
			<div class="card-footer"></div>
		</div>
		<div class="card card-login my-5">
			<div class="card-header text-center font-weight-bold">Please choose how to play</div>
			<div class="card-body d-flex align-items-center justify-content-center">
				<form onsubmit="return create_riddle_game(this)">
					<div class="form-group">
						<input name="riddle_profile" type="text" class="form-control" placeholder="Profile name" required>
					</div>
					<div class="form-group">
						<select name="categories">
							<option value="all">All questions</option>
							<option value="general">General</option>
							<option value="mixed">Mixed</option>
						</select>
					</div>
					<div class="form-group">
						<select name="mods">
							<option value="endless">Endless</option>
							<option value="limited">Limited answers</option>
						</select>
					</div>
					<div id="tries" class="form-group">
						<input name="tries" type="number" class="form-control" value="0" min="0">
					</div>
					<button type="submit" class="btn btn-success btn-block">Start Game</button>
				</form>
			</div>
			<div class="card-footer"></div>
		</div>
	</div>
</div>
{% endblock main_content %}

{% block scripts %}
<script src="{{ url_for('static', filename='custom/js/riddle-g-setting.js') }}"></script>
{% endblock scripts %}