---
title: Edit Quiz
slug: edit-quiz
---
{% extends "layouts/instructor-fluid.html" %}

{% block page %}
<ol class="breadcrumb m-b-0">
	<li><a href="index.html">Home</a></li>	
	<li><a href="instructor-quizes.html">Quiz Manager</a></li>
	<li class="active">Edit Quiz</li>
</ol>
<h1 class="page-heading h2">Edit: Vue.js Deploy Quiz</h1>
<div class="card">
	<div class="card-header">
		<h4 class="card-title">
			Basic
		</h4>
	</div>
	<div class="p-a-1">
		<form action="#">
			<div class="form-group row">
				<label for="course_title" class="col-sm-3 form-control-label">Quiz Title:</label>
				<div class="col-sm-9 col-md-4">
					<div class="input-group">
					  <span class="input-group-addon" id="sizing-addon2">#</span>
					  <input type="text" class="form-control" placeholder="Title" aria-describedby="sizing-addon2" value="Vue.js Introduction">
					</div>
				</div>
			</div>
			<div class="form-group row">
				<label for="course_title" class="col-sm-3 form-control-label">Course:</label>
				<div class="col-sm-9 col-md-4">
					<select class="c-select form-control">
						<option value="#">HTML</option>
		                <option value="#">Angular JS</option>
		                <option value="#" selected>Vue.js</option>
		                <option value="#">CSS / LESS</option>
		                <option value="#">Design / Concept</option>
					</select>
				</div>
			</div>
		
			<div class="form-group row">
				<label for="course_title" class="col-sm-3 form-control-label">Quiz Image:</label>
				<div class="col-sm-9 col-md-4">
					<p>
						<img src="assets/images/vuejs.png" alt="" width="150">
					</p>

					<label class="file">
					  <input type="file" id="file">
					  <span class="file-custom"></span>
					</label>
				</div>
			</div>
			<div class="form-group row">
				<label for="time_toggle" class="col-sm-3 form-control-label">Timeframe</label>
				<div class="col-sm-9">
					<div class="switch">
						<input id="cmn-toggle" class="switch-toggle switch-toggle-round" type="checkbox" checked>
						<label for="cmn-toggle"></label>
					</div>
					<div class="form-inline">
						<div class="form-group">
							<input type="text" class="form-control center" value="4" style="width:50px;">
						</div>
						<div class="form-group">
							<select class="c-select">
								<option value="hour" selected>Hours</option>
								<option value="minutes">Minutes</option>
							</select>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
<div class="card">
	<div class="card-header">
		<h4 class="card-title">Questions</h4>
	</div>
	<div class="card-header bg-white">
		<a href="#" data-toggle="modal" data-target="#editQuiz" class="btn btn-success btn-rounded">Add Question <i class="material-icons">add</i></a>
	</div>
	<div class="nestable" id="nestable">
		<ul class="list-group list-group-fit nestable-list-plain m-b-0">
			<li class="list-group-item nestable-item">
				<div class="media">
					<div class="media-left media-middle">
						<a href="#" class="btn btn-default nestable-handle"><i class="material-icons">menu</i></a>
					</div>
					<div class="media-body media-middle">
						Installation
					</div>
					<div class="media-right right">
						<div style="width:100px">
							<a href="#" data-toggle="modal" data-target="#editQuiz"  class="btn btn-primary btn-sm"><i class="material-icons">edit</i></a>
						</div>
					</div>
				</div>
			</li>
			<li class="list-group-item nestable-item" >
				<div class="media">
					<div class="media-left media-middle">
						<a href="#" class="btn btn-default nestable-handle"><i class="material-icons">menu</i></a>
					</div>
					<div class="media-body media-middle">
						The MVC architectural pattern
					</div>
						<div class="media-right right">
						<div style="width:100px">
							<a href="#" data-toggle="modal" data-target="#editQuiz"  class="btn btn-primary btn-sm"><i class="material-icons">edit</i></a>
						</div>
					</div>
				</div>
			</li>
			<li class="list-group-item nestable-item">
				<div class="media">
					<div class="media-left media-middle">
						<a href="#" class="btn btn-default nestable-handle"><i class="material-icons">menu</i></a>
					</div>
					<div class="media-body media-middle">
						Database Models
					</div>
					<div class="media-right right">
						<div style="width:100px">
							<a href="#" data-toggle="modal" data-target="#editQuiz"  class="btn btn-primary btn-sm"><i class="material-icons">edit</i></a>
						</div>
					</div>
				</div>
			</li>
			<li class="list-group-item nestable-item" data-id="4">
				<div class="media">
					<div class="media-left media-middle">
						<a href="#" class="btn btn-default nestable-handle"><i class="material-icons">menu</i></a>
					</div>
					<div class="media-body media-middle">
						Database Access
					</div>
					<div class="media-right right">
						<div style="width:100px">
							<a href="#" data-toggle="modal" data-target="#editQuiz" class="btn btn-primary btn-sm"><i class="material-icons">edit</i></a>
						</div>
					</div>
				</div>
			</li>
			<li class="list-group-item nestable-item" data-id="5">
				<div class="media">
					<div class="media-left media-middle">
						<a href="#" class="btn btn-default nestable-handle"><i class="material-icons">menu</i></a>
					</div>
					<div class="media-body media-middle">
						Eloquent Basics
					</div>
					<div class="media-right right">
						<div style="width:100px">
							<a href="#" data-toggle="modal" data-target="#editQuiz"  class="btn btn-primary btn-sm"><i class="material-icons">edit</i></a>
						</div>
					</div>
				</div>
			</li>
			<li class="list-group-item nestable-item" data-id="6">
				<div class="media">
					<div class="media-left media-middle">
						<a href="#" class="btn btn-default nestable-handle"><i class="material-icons">menu</i></a>
					</div>
					<div class="media-body media-middle">
						 Take Quiz
					</div>
					<div class="media-right right">
						<div style="width:100px">
							<a href="#" data-toggle="modal" data-target="#editQuiz" class="btn btn-primary btn-sm"><i class="material-icons">edit</i></a>
						</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
</div>
{% endblock %}

{% block footer %}
<div class="modal fade" id="editQuiz">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header bg-primary">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h5 class="modal-title">Add/Edit Question</h5>
			</div>
			<div class="modal-body">
				<form action="#">
					<div class="form-group row">
						<label for="" class="form-control-label col-md-3">Title:</label>
						<div class="col-md-9">
							<input type="text" class="form-control" value="Database Access">	
						</div>
					</div>
					<div class="form-group row">
						<label for="" class="form-control-label col-md-3">Type:</label>
						<div class="col-md-4">
							<select class="c-select form-control">
								
								<option value="1">Input</option>
								<option value="2">Textarea</option>
								<option value="3">Checkbox</option>
								<option value="3">Radio</option>
							</select>
						</div>
					</div>
					<div class="form-group row">
						<label for="" class="form-control-label col-md-3">Answers:</label>
						<div class="col-md-9">
							<a href="#" class="btn btn-default btn-rounded"><i class="material-icons">add</i> Add Answer</a>
						</div>
					</div>
					<div class="form-group row">
						<label for="" class="form-control-label col-md-3">Question Score:</label>
						<div class="col-md-4">
							<input id="touch-spin-2" data-toggle="touch-spin" data-min="0" data-max="100" data-step="5" type="text" value="50" name="demo2" class="form-control"/>
						</div>
					</div>
					<div class="form-group row">
						<div class="col-md-8 col-md-offset-3">
							<button type="submit" class="btn btn-success">Save</button>
						</div>
					</div>
				</form>	
			</div>
		</div>
	</div>
</div>
{% endblock %}



{% block vendor_styling %}
	<!-- Touchspin -->
	<link rel="stylesheet" href="examples/css/bootstrap-touchspin.min.css">

	<!-- Vendor CSS -->
	<link rel="stylesheet" href="examples/css/nestable.min.css">
{% endblock %}

{% block vendor_scripts %}
	<!-- Vendor JS -->
	<script src="assets/vendor/jquery.nestable.js"></script>
	<script src="assets/vendor/jquery.bootstrap-touchspin.js"></script>
{% endblock%}

{% block example_scripts %}
	<!-- Initialize -->
	<script src="examples/js/nestable.js"></script>
	<script src="examples/js/touchspin.js"></script>
{% endblock %}