pannabel/SkyLearn-Test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Few UI fixes

Browse Source
This commit is contained in:
papi 2024-01-16 17:33:06 +03:00
parent a844a45935
commit 2531758ab5
16 changed files with 293 additions and 564 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
TODO.md
View File

@ -2,7 +2,9 @@
- **Add and Drop**: - **Add and Drop**:
- The add and drop page should only include courses offered by the department head. - The add and drop page should only include courses offered by the department head.
- Add and drop should be restricted by the school calendar. - Add and drop date should be restricted by the school calendar.
- **Auto generate username and password when adding students and lecturers**
- Instead of filling the username and password for the student/lecturer, the system should automatically generate them and send to the student's/lecturer's email.
- **Payment integration**: - **Payment integration**:
- Integrating PayPal and Stripe for students to pay their fees. - Integrating PayPal and Stripe for students to pay their fees.
- **Integrate the dashboard with dynamic/live data**: - **Integrate the dashboard with dynamic/live data**:

64
templates/accounts/add_staff.html
View File

@ -15,46 +15,17 @@
<h4 class="fw-bold mb-3"><i class="fas fa-chalkboard-teacher me-2"></i>Lecturer Add Form</h4> <h4 class="fw-bold mb-3"><i class="fas fa-chalkboard-teacher me-2"></i>Lecturer Add Form</h4>
{% if messages %} {% include 'snippets/messages.html' %}
{% for message in messages %}
{% if message.tags == 'error' %}
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle"></i>{{ message }}
</div>
{% else %}
<div class="alert alert-success">
<i class="fas fa-check-circle"></i>{{ message }}
</div>
{% endif %}
{% endfor %}
{% endif %}
<form action="" method="POST">{% csrf_token %} <form action="" method="POST">{% csrf_token %}
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-6"> <div class="col-md-6">
<div class="card"> <div class="card">
<p class="form-title">Login Info</p> <p class="form-title">Login Info</p>
<div class="p-2"> <div class="card-body">
<div class="form-group"> {{ form.username|as_crispy_field }}
<b>ID No.</b>{{ form.username }} {{ form.password1|as_crispy_field }}
<span class="danger">{{ form.username.errors }}</span> {{ form.password2|as_crispy_field }}
<p class="text-muted-xs">Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.</p>
</div>
<div class="form-group">
<b>{{ form.password1.label }}</b>{{ form.password1 }}
<span class="danger">{{ form.password1.errors }}</span>
<p class="text-muted-xs">
The password can't be too similar to other personal information.<br>
The password must contain at least 8 characters.<br>
The password can't be a commonly used password.<br>
The password can't be entirely numeric.
</p>
</div>
<div class="form-group">
<b>{{ form.password2.label }}</b>{{ form.password2 }}
<span class="danger">{{ form.password2.errors }}</span>
<p class="text-muted-xs">Enter the same password as before, for verification.</p>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -62,26 +33,11 @@
<div class="card"> <div class="card">
<p class="form-title">Personal Info</p> <p class="form-title">Personal Info</p>
<div class="p-2"> <div class="p-2">
<div class="form-group"> {{ form.first_name|as_crispy_field }}
<b>{{ form.first_name.label }}</b>{{ form.first_name }} {{ form.last_name|as_crispy_field }}
<span class="danger">{{ form.first_name.errors }}</span> {{ form.email|as_crispy_field }}
</div> {{ form.address|as_crispy_field }}
<div class="form-group"> {{ form.phone|as_crispy_field }}
<b>{{ form.last_name.label }}</b>{{ form.last_name }}
<span class="danger">{{ form.last_name.errors }}</span>
</div>
<div class="form-group">
<b>{{ form.email.label }}</b>{{ form.email }}
<span class="danger">{{ form.email.errors }}</span>
</div>
<div class="form-group">
<b>{{ form.address.label }}</b>{{ form.address }}
<span class="danger">{{ form.address.errors }}</span>
</div>
<div class="form-group">
<b>{{ form.phone.label }}</b>{{ form.phone }}
<span class="danger">{{ form.phone.errors }}</span>
</div>
</div> </div>
</div> </div>
</div> </div>

89
templates/accounts/add_student.html
View File

@ -15,97 +15,42 @@
<h4 class="mb-3 fw-bold"><i class="fas fa-user-graduate me-2"></i>Student Add Form</h4> <h4 class="mb-3 fw-bold"><i class="fas fa-user-graduate me-2"></i>Student Add Form</h4>
{% if messages %} {% include 'snippets/messages.html' %}
{% for message in messages %}
{% if message.tags == 'error' %}
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle"></i>{{ message }}
</div>
{% else %}
<div class="alert alert-success">
<i class="fas fa-check-circle"></i>{{ message }}
</div>
{% endif %}
{% endfor %}
{% endif %}
<form action="" method="POST">{% csrf_token %} <form action="" method="POST">{% csrf_token %}
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-6"> <div class="col-md-6">
<div class="card"> <div class="card">
<p class="form-title">Login Info</p> <p class="form-title">Login Info</p>
<div class="p-3"> <div class="card-body">
{{ form.username|as_crispy_field }}
<div class="form-group"> {{ form.password1|as_crispy_field }}
<b>ID No.</b>{{ form.username }} {{ form.password2|as_crispy_field }}
<span class="danger">{{ form.username.errors }}</span>
<p class="text-muted-xs">Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.</p>
</div> </div>
<div class="form-group">
<b>{{ form.password1.label }}</b>{{ form.password1 }}
<span class="danger">{{ form.password1.errors }}</span>
<p class="text-muted-xs">
The password can't be too similar to other personal information.<br>
The password must contain at least 8 characters.<br>
The password can't be a commonly used password.<br>
The password can't be entirely numeric.
</p>
</div>
<div class="form-group">
<b>{{ form.password2.label }}</b>{{ form.password2 }}
<span class="danger">{{ form.password2.errors }}</span>
<p class="text-muted-xs">Enter the same password as before, for verification.</p>
</div>
</div>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="card"> <div class="card">
<p class="form-title">Personal Info</p> <p class="form-title">Personal Info</p>
<div class="container"> <div class="card-body">
{{ form.first_name|as_crispy_field }}
<div class="form-group"> {{ form.last_name|as_crispy_field }}
<b>{{ form.first_name.label }}</b>{{ form.first_name }} {{ form.email|as_crispy_field }}
<span class="danger">{{ form.first_name.errors }}</span> {{ form.address|as_crispy_field }}
{{ form.phone|as_crispy_field }}
</div> </div>
<div class="form-group">
<b>{{ form.last_name.label }}</b>{{ form.last_name }}
<span class="danger">{{ form.last_name.errors }}</span>
</div>
<div class="form-group">
<b>{{ form.email.label }}</b>{{ form.email }}
<span class="danger">{{ form.email.errors }}</span>
</div>
<div class="form-group">
<b>{{ form.address.label }}</b>{{ form.address }}
<span class="danger">{{ form.address.errors }}</span>
</div>
<div class="form-group">
<b>{{ form.phone.label }}</b>{{ form.phone }}
<span class="danger">{{ form.phone.errors }}</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-6 mr-auto"> <div class="col-md-6 mr-auto">
<div class="card"> <div class="card">
<p class="form-title">Others</p> <p class="form-title">Others</p>
<div class="p-3"> <div class="card-body">
<div class="form-group"> {{ form.program|as_crispy_field }}
<b>{{ form.program.label }}</b>{{ form.program }} {{ form.level|as_crispy_field }}
<span class="danger">{{ form.program.errors }}</span>
</div> </div>
<div class="form-group">
<b>{{ form.level.label }}</b>{{ form.level }}
<span class="danger">{{ form.level.errors }}</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

14
templates/accounts/profile.html
View File

@ -15,19 +15,7 @@
</ol> </ol>
</nav> </nav>
{% if messages %} {% include 'snippets/messages.html' %}
{% for message in messages %}
{% if message.tags == 'error' %}
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle"></i>{{ message }}
</div>
{% else %}
<div class="alert alert-success">
<i class="fas fa-check-circle"></i>{{ message }}
</div>
{% endif %}
{% endfor %}
{% endif %}
<div class="row"> <div class="row">

175
templates/accounts/profile_single.html
View File

@ -1,9 +1,13 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% block title %} {{ title }} | Learning management system{% endblock title %} {% block title %} {{ title }} | Learning management system{% endblock title %}
{% load static %} {% load static %}
{% load i18n %} {% load i18n %}
{% block content %} {% block content %}
{% if user.is_authenticated %}
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb"> <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a></li> <li class="breadcrumb-item"><a href="/">Home</a></li>
@ -11,104 +15,111 @@
</ol> </ol>
</nav> </nav>
{% if messages %} {% include 'snippets/messages.html' %}
{% for message in messages %}
{% if message.tags == 'error' %}
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle"></i>{{ message }}
</div>
{% else %}
<div class="alert alert-success">
<i class="fas fa-check-circle"></i>{{ message }}
</div>
{% endif %}
{% endfor %}
{% endif %}
{% if request.user.is_superuser %} <div class="row">
<div class="btn-flex">
{% if user.is_student %}
<a class="edit-btn" href="{% url 'student_edit' pk=user.id %}">
<i class="fas fa-user-edit"></i><span class="mobile-hide">Edit Profile</span>
</a>
{% endif %}
{% if user.is_lecturer %}
<a class="edit-btn" href="{% url 'staff_edit' pk=user.id %}">
<i class="fas fa-user-edit"></i><span class="mobile-hide">Edit Profile</span>
</a>
{% endif %}
<!-- <a class="edit-btn" href="{% url 'change_password' %}"><i class="fas fa-lock"></i><span class="mobile-hide">
Change password</span>
</a> -->
</div>
{% endif %}
<div class="row justify-content-between">
<div class="col-md-3 mx-auto"> <div class="col-md-3 mx-auto">
<div class="card"> <div class="card p-2">
<img src="{{ user.get_picture }}" class="dashboard-img"> <div class="text-center">
<div class="program-description"> <img src="{{ user.picture.url }}" class="w-100">
<p><strong>Last login: </strong>{{ user.last_login|date }}</p> <ul class="px-2 list-unstyled">
<p><strong>Full Name: </strong>{{ user.get_full_name|title }}</p> <li>{{ user.get_full_name|title }}</li>
<p><strong>Role: </strong>{{ user_type }} <li><strong>Last login: </strong>{{ user.last_login|date }}</li>
</p> <li><strong>Role: </strong>
{{ user.get_user_role }}
</li>
</ul>
</div> </div>
<hr>
{% if request.user.is_superuser %}
<div class="btn-flex">
{% if user.is_student %}
<a class="edit-btn" href="{% url 'student_edit' pk=user.id %}">
<i class="fas fa-user-edit"></i><span class="mobile-hide">Edit Profile</span>
</a>
{% endif %}
{% if user.is_lecturer %}
<a class="edit-btn" href="{% url 'staff_edit' pk=user.id %}">
<i class="fas fa-user-edit"></i><span class="mobile-hide">Edit Profile</span>
</a>
{% endif %}
</div>
{% endif %}
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-9 mx-auto">
<div class="card"> <div class="card">
<div class="card-body">
{% if user.is_lecturer %} <!-- {% if user.is_student %}
<p class="form-title"><i class="fas fa-book-open"></i>My Courses</p> <p class="form-title"><i class="fas fa-book-open"></i>Enrolled Courses</p>
<div class="dashboard-description"> <div class="dashboard-description">
{% if courses %} {% if courses %}
<div class="flex"> <div class="flex">
{% for course in courses %} {% for course in courses %}
<div class="flex"><a class="edit-btn" href="{{ course.get_absolute_url }}">{{ course }}</a></div> <div class="flex"><a class="edit-btn" href="{{ course.get_absolute_url }}">{{ course }}</a></div>
{% endfor %} {% endfor %}
</div>
{% else %}
<div class="text-danger"><i class="far fa-frown"></i>No courses!</div>
{% endif %}
</div> </div>
{% endif %} -->
{% if user.is_lecturer %}
<p class="fw-bold"><i class="fas fa-book-open"></i> My Courses</p>
{% if courses %}
<ul>
{% for course in courses %}
<li><a href="{{ course.get_absolute_url }}">{{ course }}</a></li>
{% endfor %}
</ul>
{% else %} {% else %}
<div class="text-danger">No courses!</div> <div class="text-danger">No courses assigned!</div>
{% endif %} {% endif %}
</div> <hr>
{% endif %}
<p class="title-info"><i class="fas fa-user"></i>Personal Info</p>
<div class="dashboard-description">
<p><strong>First Name:</strong> {{ user.first_name|title }}</p>
<p><strong>Last Name:</strong> {{ user.last_name|title }}</p>
<p><strong>ID No.:</strong> {{ user.username }}</p>
</div>
{% if user.is_student %}
<p class="title-info"><i class="fas fa-graduation-cap"></i>Applicant Info</p>
<div class="dashboard-description">
<p><strong>School: </strong>{{ student.get_student_school }}</p>
<p><strong>Program: </strong>{{ student.program }}</p>
<p><strong>Level: </strong>{{ student.level }}</p>
</div>
{% endif %}
<p class="title-info"><i class="fas fa-phone-square-alt"></i>Contact Info</p>
<div class="dashboard-description">
<p><strong>Email:</strong> {{ user.email }}</p>
<p><strong>Tel No.:</strong> {{ user.phone }}</p>
<p><strong>Address/city:</strong> {{ user.address }}</p>
</div>
<p class="title-info"><i class="fa fa-calendar-day"></i>Important Dates</p>
<div class="dashboard-description">
<p><strong>Last login:</strong> {{ user.last_login }}</p>
{% if current_semester and current_session %}
<p><strong>Academic Year:</strong> {{ current_semester }} Semester {{ current_session }}</p>
{% endif %} {% endif %}
<p><strong>Registered Date:</strong> {{ user.date_joined|date }}</p>
<p class="fw-bold"><i class="fas fa-user"></i> Personal Info</p>
<div class="dashboard-description">
<p><strong>First Name:</strong> {{ user.first_name|title }}</p>
<p><strong>Last Name:</strong> {{ user.last_name|title }}</p>
<p><strong>ID No.:</strong> {{ user.username }}</p>
</div>
{% if user.is_student %}
<hr>
<p class="fw-bold"><i class="fas fa-graduation-cap"></i> Applicant Info</p>
<div class="dashboard-description">
<p><strong>School: </strong>Hawas Preparatory School</p>
<p><strong>Level: </strong>{{ level.level }}</p>
</div>
{% endif %}
<hr>
<p class="fw-bold"><i class="fas fa-phone-square-alt"></i> Contact Info</p>
<div class="dashboard-description">
<p><strong>Email:</strong> {{ user.email }}</p>
<p><strong>Tel No.:</strong> {{ user.phone }}</p>
<p><strong>Address/city:</strong> {{ user.address }}</p>
</div>
<hr>
<p class="fw-bold"><i class="fa fa-calendar-day"></i> Important Dates</p>
<div class="dashboard-description">
<p><strong>Last login:</strong> {{ user.last_login }}</p>
{% if current_semester and current_session %}
<p><strong>Academic Year:</strong> {{ current_semester }} Semester {{ current_session }}</p>
{% endif %}
<p><strong>Registered Date:</strong> {{ user.date_joined|date }}</p>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-3 mx-auto"></div> <div class="col-md-3 mx-auto"></div>
</div> </div>
{% endif %}
{% endblock content %} {% endblock content %}

73
templates/course/course_add.html
View File

@ -13,82 +13,39 @@
</ol> </ol>
</nav> </nav>
<div class="title-1">Course Add &amp; Update Form</div> <div class="title-1">Course Form</div>
<br> <br>
<br> <br>
{% if messages %}
{% for message in messages %} {% include 'snippets/messages.html' %}
{% if message.tags == 'error' %}
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle"></i>{{ message }}
</div>
{% else %}
<div class="alert alert-success">
<i class="fas fa-check-circle"></i>{{ message }}
</div>
{% endif %}
{% endfor %}
{% endif %}
<form action="" method="POST">{% csrf_token %} <form action="" method="POST">{% csrf_token %}
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="card"> <div class="card">
<p class="form-title">Course Info</p> <p class="form-title">Course Detail</p>
<div class="p-3"> <div class="p-3">
{{ form.title|as_crispy_field }}
<div class="form-group"> {{ form.code|as_crispy_field }}
<b>{{ form.title.label }}</b>{{ form.title }} {{ form.summary|as_crispy_field }}
<span class="danger">{{ form.title.errors }}</span>
<p class="text-muted-xs">Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.</p>
</div>
<div class="form-group">
<b>{{ form.code.label }}</b>{{ form.code }}
<span class="danger">{{ form.code.errors }}</span>
<p class="text-muted-xs">The course code must be similar to only the pre requests.</p>
</div>
<div class="form-group">
<b>{{ form.summary.label }}</b>(optional){{ form.summary }}
<span class="danger">{{ form.summary.errors }}</span>
<p class="text-muted-xs">Enter some description about the course.</p>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="card"> <div class="card">
<p class="form-title">Applicant Info</p> <p class="form-title">Other Info</p>
<div class="p-3"> <div class="p-3">
{{ form.program|as_crispy_field }}
<div class="form-group"> {{ form.credit|as_crispy_field }}
<b>{{ form.program.label }}</b>{{ form.program }} {{ form.year|as_crispy_field }}
<span class="danger">{{ form.program.errors }}</span> {{ form.semester|as_crispy_field }}
</div> {{ form.level|as_crispy_field }}
<div class="form-group"> {{ form.is_elective|as_crispy_field }}
<b>{{ form.credit.label }}</b>{{ form.credit }}
<span class="danger">{{ form.credit.errors }}</span>
</div>
<div class="form-group">
<b>{{ form.year.label }}</b>{{ form.year }}
<span class="danger">{{ form.year.errors }}</span>
</div>
<div class="form-group">
<b>{{ form.semester.label }}</b>{{ form.semester }}
<span class="danger">{{ form.semester.errors }}</span>
</div>
<div class="form-group">
<b>{{ form.level.label }}</b>{{ form.level }}
<span class="danger">{{ form.level.errors }}</span>
</div>
<div class="form-group">
<b>{{ form.is_elective.label }}</b>{{ form.is_elective }}
<span class="danger">{{ form.is_elective.errors }}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<center><input class="btn btn-outline-primary mt-3" type="submit" value="Save"></center> <input class="btn btn-primary mt-3" type="submit" value="Save">
</form> </form>
{% endblock content %} {% endblock content %}

28
templates/course/program_add.html
View File

@ -13,19 +13,7 @@
</ol> </ol>
</nav> </nav>
{% if messages %} {% include 'snippets/messages.html' %}
{% for message in messages %}
{% if message.tags == 'error' %}
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle"></i>{{ message }}
</div>
{% else %}
<div class="alert alert-success">
<i class="fas fa-check-circle"></i>{{ message }}
</div>
{% endif %}
{% endfor %}
{% endif %}
<div class="row"> <div class="row">
<div class="col-md-6 mx-auto"> <div class="col-md-6 mx-auto">
@ -33,18 +21,8 @@
<p class="form-title">Program Add Form</p> <p class="form-title">Program Add Form</p>
<div class="p-3"><br> <div class="p-3"><br>
<form action="" method="POST">{% csrf_token %} <form action="" method="POST">{% csrf_token %}
<!-- {{ form|crispy }} --> {{ form|crispy }}
<input class="btn btn-primary" type="submit" value="Save">
<div class="form-group">
<b>{{ form.title.label }}</b>{{ form.title }}
<span class="danger">{{ form.title.errors }}</span>
</div>
<div class="form-group">
<b>{{ form.summary.label }}</b>{{ form.summary }}
<span class="danger">{{ form.summary.errors }}</span>
</div>
<input class="btn btn-outline-primary" type="submit" value="Save">
</form> </form>
</div> </div>
</div> </div>

91
templates/course/program_list.html
View File

@ -17,53 +17,12 @@
{% endif %} {% endif %}
<div class="title-1"><i class="fas fa-book-open"></i>Program List</div> <div class="title-1"><i class="fas fa-book-open"></i>Program List</div>
<br><br>
{% if messages %} {% include 'snippets/messages.html' %}
{% for message in messages %} {% include 'snippets/filter_form.html' %}
{% if message.tags == 'error' %}
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle"></i>{{ message }}
</div>
{% else %}
<div class="alert alert-success">
<i class="fas fa-check-circle"></i>{{ message }}
</div>
{% endif %}
{% endfor %}
{% endif %}
<div class="content-center"> <div class="table-responsive table-shadow table-light table-striped m-0 mt-4">
<form class="search-form mx-auto" action="" method="GET">
{{ filter.form }}
<button class="btn btn-light" type="submit">
<i class="fas fa-search"></i> Filter
</button>
</form>
</div>
<!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button> -->
<!-- Modal -->
{% for program in programs %}
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<p class="p-4">
Are you sure you want to delete this item?
</p>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<a class="btn btn-danger" href="{% url 'program_delete' pk=program.pk %}">Delete</a>
</div>
</div>
</div>
</div>
{% endfor %}
<div class="table-responsive table-shadow table-light table-striped m-0 mt-5">
<div class="table-shadow"> <div class="table-shadow">
<table class="table table-light"> <table class="table table-light">
<thead> <thead>
@ -80,41 +39,23 @@
{% for program in filter.qs %} {% for program in filter.qs %}
<tr> <tr>
<td>{{ forloop.counter }}.</td> <td>{{ forloop.counter }}.</td>
<td><a class="a-list" href="{{ program.get_absolute_url }}"> <td>
{{ program.title}}</a></td> <a class="a-list" href="{{ program.get_absolute_url }}">
{{ program.title}}
</a>
</td>
<td>{{ program.summary }} </td> <td>{{ program.summary }} </td>
{% if request.user.is_superuser %} {% if request.user.is_superuser %}
<td> <td>
<div class="update-delete"> <div class="dropdown">
<a href="{% url 'edit_program' pk=program.pk %}" class="update"><i <button class="btn btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
class="fas fa-edit"></i></a> <i class="fa fa-ellipsis-vertical"></i>
<button type="button" class="btn btn-sm" data-toggle="modal" data-target="#exampleModal">
<i class="fas fa-trash-alt"></i>
</button> </button>
<ul class="dropdown-menu position-fixed">
<li><a class="dropdown-item" href="{% url 'edit_program' pk=program.pk %}"><i class="fas fa-edit"></i> Update</a></li>
<li><a class="dropdown-item text-danger" href="{% url 'program_delete' pk=program.pk %}"><i class="fas fa-trash-alt"></i> Delete</a></li>
</ul>
</div> </div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<p class="p-4">
Are you sure you want to delete this program?
</p>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Close</button>
<a class="btn btn-danger"
href="{% url 'program_delete' pk=program.pk %}">Delete</a>
</div>
</div>
</div>
</div>
<!-- <td> <div class="update-delete">
<a href="{% url 'edit_program' pk=program.pk %}" class="update"><i class="fas fa-edit"></i></a>
<a href="{% url 'program_delete' pk=program.pk %}" class="delete"><i class="fas fa-trash-alt"></i></a>
</div> -->
</td> </td>
{% endif %} {% endif %}
</tr> </tr>

28
templates/course/program_single.html
View File

@ -27,30 +27,8 @@
{% endif %} {% endif %}
{% endif %} {% endif %}
{% if messages %} {% include 'snippets/messages.html' %}
{% for message in messages %} {% include 'snippets/filter_form.html' %}
{% if message.tags == 'error' %}
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle"></i>{{ message }}
</div>
{% else %}
<div class="alert alert-success">
<i class="fas fa-check-circle"></i>{{ message }}
</div>
{% endif %}
{% endfor %}
{% endif %}
<div class="content-center">
<form class="search-form" action="." method="GET">
<input class="au-input" type="text" name="name" placeholder="Course Name" value="{{ request.GET.name }}" />
<input class="au-input" type="text" name="code" placeholder="Course Code" value="{{ request.GET.code }}" />
<input class="au-input" type="number" name="year" placeholder="Course Year" value="{{ request.GET.year }}" />
<button class="btn btn-light" type="submit">
<i class="fas fa-search"></i> filter
</button>
</form>
</div>
<div class="table-responsive p-0 px-2 mt-5"> <div class="table-responsive p-0 px-2 mt-5">
<div class="table-shadow"> <div class="table-shadow">
@ -95,7 +73,7 @@
data-bs-boundary="window" aria-haspopup="true" aria-expanded="false"> data-bs-boundary="window" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v m-0"></i> <i class="fas fa-ellipsis-v m-0"></i>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu position-fixed">
<a class="dropdown-item" href="{% url 'edit_course' slug=course.slug %}"> <a class="dropdown-item" href="{% url 'edit_course' slug=course.slug %}">
<i class="fas fa-pencil-alt"></i> Edit <i class="fas fa-pencil-alt"></i> Edit
</a> </a>

59
templates/question.html
View File

@ -17,11 +17,11 @@
<li class="breadcrumb-item active" aria-current="page">{{ quiz.title|title }}</li> <li class="breadcrumb-item active" aria-current="page">{{ quiz.title|title }}</li>
</ol> </ol>
</nav> </nav>
<div class="container">
<div class="header-title-xl text-center">{{ quiz.title|title }}</div> <div class="title-1">{{ quiz.title|title|truncatechars:25 }}</div>
<div class="title-line mb-2"></div> <br>
<div class="container">
{% if previous.answers %} {% if previous.answers %}
@ -58,6 +58,7 @@
<tr class="success"> <tr class="success">
<td>{{ answer }}</td> <td>{{ answer }}</td>
<td><strong>{% trans "This is the correct answer" %}</strong></td> <td><strong>{% trans "This is the correct answer" %}</strong></td>
</tr>
{% else %} {% else %}
<tr> <tr>
<td>{{ answer }}</td> <td>{{ answer }}</td>
@ -100,23 +101,27 @@
{% if progress.0|add:1 == 1 %} {% if progress.0|add:1 == 1 %}
<div id="popup-box-messages"> <div class="modal fade show" id="instractionModal" tabindex="-1" aria-labelledby="instractionModalLabel" aria-hidden="true">
<div class="box-messages"> <div class="modal-dialog">
<a id="popup-btn-messages" class="btn btn-light"><i class="fas fa-times"></i></a> <div class="modal-content">
<div class="lead">Quiz instractions</div> <div class="modal-header">
<div class="alert alert-warning"> <h1 class="modal-title fs-5" id="instractionModalLabel">Quiz instractions</h1>
<p> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
You can't go back to the previous question after you submit it,
so double check your answer before proceeding to the next one!
</p>
</div> </div>
<button id="popup-btn-messages" type="button" class="btn btn-primary" data-dismiss="modal">Understood</button> <div class="modal-body">
</div> You can't go back to the previous question after you submit it,
</div> so double check your answer before proceeding to the next one!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Understood</button>
</div>
</div>
</div>
</div>
{% endif %} {% endif %}
{% if progress %} {% if progress %}
<div class="info-text bg-danger" style="float: right;"> <div class="text-light rounded small px-2 bg-danger" style="float: right;">
{% trans "Question" %} {{ progress.0|add:1 }} {% trans "of" %} {{ progress.1 }} {% trans "Question" %} {{ progress.0|add:1 }} {% trans "of" %} {{ progress.1 }}
</div> </div>
{% endif %} {% endif %}
@ -127,7 +132,7 @@
</p> </p>
<div class="card"> <div class="card">
<div class="card-title lead bg-light p-2">{{ question.content }}</div> <div class="lead p-2">{{ question.content }}</div>
{% if question.figure %} {% if question.figure %}
<div class="col-md-8 mx-auto"> <div class="col-md-8 mx-auto">
@ -136,7 +141,7 @@
{% endif %} {% endif %}
<div class="card-subtitle p-4"> <div class="card-subtitle p-4">
<form action="" method="POST">{% csrf_token %} <form action="" method="POST">{% csrf_token %}
<input type=hidden name="question_id" value="{{ question.id }}"> <input type="hidden" name="question_id" value="{{ question.id }}">
<ul class="list-group"> <ul class="list-group">
@ -147,7 +152,8 @@
{% endfor %} {% endfor %}
</ul> </ul>
<input type="submit" value={% trans "Check" %} class="btn btn-large btn-block btn-primary" > <br>
<input type="submit" value={% trans "Check" %} class="btn btn-large btn-block btn-primary" />
<!-- <input type="submit" value={% trans "Previous" %} class="btn btn-large btn-block btn-outline-primary" > --> <!-- <input type="submit" value={% trans "Previous" %} class="btn btn-large btn-block btn-outline-primary" > -->
</form> </form>
</div> </div>
@ -157,18 +163,13 @@
</div> </div>
{% endblock %} {% endblock %}
{% block js %} {% block js %}
<script> <script>
const popupMessagesButtons = document.querySelectorAll('#popup-btn-messages'); const instractionModal = new bootstrap.Modal('#instractionModal', {
keyboard: false
for (const button of popupMessagesButtons) { })
button.addEventListener('click', () => { instractionModal.show();
document.getElementById('popup-box-messages').style.display = 'none';
})
}
</script> </script>
{% endblock js %} {% endblock js %}

35
templates/quiz/mcquestion_form.html
View File

@ -13,12 +13,11 @@
<li class="breadcrumb-item active" aria-current="page">MC Question Form</li> <li class="breadcrumb-item active" aria-current="page">MC Question Form</li>
</ol> </ol>
</nav> </nav>
<div class="title-1">Add questions [{{ quiz_obj|truncatechars:15 }}]</div>
<br><br>
<div class="container"> <div class="container">
<div class="header-title-md text-center mt-4">Add questions [{{ quiz_obj }}]</div>
<div class="title-line mb-5"></div>
<div class="info-text bg-orange mb-3">{{ quizQuestions }} question added</div> <div class="info-text bg-orange mb-3">{{ quizQuestions }} question added</div>
<form action="#" method="POST">{% csrf_token %} <form action="#" method="POST">{% csrf_token %}
@ -28,20 +27,12 @@
<div class="mb-2" hidden> <div class="mb-2" hidden>
{{ form.quiz }} {{ form.quiz }}
</div> </div>
<div class="mb-2"> {{ form.content|as_crispy_field }}
{{ form.content|as_crispy_field }} {{ form.figure|as_crispy_field }}
</div> {{ form.explanation|as_crispy_field }}
<div class="mb-2">
{{ form.figure|as_crispy_field }}
</div>
<div class="mb-2">
{{ form.explanation|as_crispy_field }}
</div>
</div> </div>
<div class="col mx-3 py-4 border bg-white"> <div class="col mx-3 py-4 border bg-white">
<div class="mb-2"> {{ form.choice_order|as_crispy_field }}
{{ form.choice_order|as_crispy_field }}
</div>
<div class="border p-2"> <div class="border p-2">
<label class="lead">Choices</label> <label class="lead">Choices</label>
{{ formset.management_form }} {{ formset.management_form }}
@ -60,12 +51,10 @@
</div> </div>
</div> </div>
</div> </div>
<center> <button type="submit" formnovalidate name="another" class="btn btn-outline-primary">
<button type="submit" formnovalidate name="another" class="btn btn-lg btn-outline-primary"> Save and add another
Save and add another </button>
</button> <button class="btn btn-primary my-4" type="submit">Save</button>
<button class="btn btn-lg btn-primary my-4" type="submit">Save</button>
</center>
</form> </form>
</div> </div>

88
templates/quiz/quiz_form.html
View File

@ -14,71 +14,55 @@
</ol> </ol>
</nav> </nav>
<div class="title-1">Quiz form for {{ course|truncatechars:15 }}</div>
<br><br>
<div class="container"> <div class="container">
<div class="header-title-xl text-center">Quiz form for {{ course }}</div>
<div class="title-line mb-5"></div>
<form action="" method="POST">{% csrf_token %} <form action="" method="POST">{% csrf_token %}
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="card p-2"> <div class="card">
<!-- <div class="container"> --> <div class="card-body">
<div class="mb-2" hidden> <!-- <div class="container"> -->
<label for="course">{{ form.course.label }}</label><br> {{ form.course }} <div hidden>
<span class="danger">{{ form.course.errors }}</span> <label for="course">{{ form.course.label }}</label><br> {{ form.course }}
<span class="danger">{{ form.course.errors }}</span> <span class="danger">{{ form.course.errors }}</span>
<span class="danger">{{ form.course.errors }}</span>
</div>
{{ form.category|as_crispy_field }}
{{ form.title|as_crispy_field }}
<!-- <div class="mb-2">
<label for="max_questions">{{ form.max_questions.label }}</label>
<input class="form-control" type="number" name="max_questions" min="0" id="id_max_questions">
<span class="danger">{{ form.max_questions.errors }}</span>
<small class="d-block text-muted">Number of questions to be answered on each attempt.</small>
</div> -->
{{ form.pass_mark|as_crispy_field }}
{{ form.description|as_crispy_field }}
<!-- </div> -->
</div> </div>
<div class="mb-2">
{{ form.category|as_crispy_field }}
</div>
<div class="mb-2">
{{ form.title|as_crispy_field }}
</div>
<!-- <div class="mb-2">
<label for="max_questions">{{ form.max_questions.label }}</label>
<input class="form-control" type="number" name="max_questions" min="0" id="id_max_questions">
<span class="danger">{{ form.max_questions.errors }}</span>
<small class="d-block text-muted">Number of questions to be answered on each attempt.</small>
</div> -->
<div class="mb-2">
{{ form.pass_mark|as_crispy_field }}
</div>
<div class="mb-2">
{{ form.description|as_crispy_field }}
</div>
<!-- </div> -->
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="card p-3"> <div class="card">
<!-- <div class="container"> --> <div class="card-body">
<div class="mb-2" hidden> <!-- <div class="container"> -->
<label for="questions">{{ form.questions.label }}</label><br> {{ form.questions }} <div hidden>
<span class="danger">{{ form.questions.errors }}</span> <label for="questions">{{ form.questions.label }}</label><br> {{ form.questions }}
<small class="d-block text-muted">Hold down "Control", or "Command" on a Mac, to select more than one.</small> <span class="danger">{{ form.questions.errors }}</span>
<small class="d-block text-muted">Hold down "Control", or "Command" on a Mac, to select more than one.</small>
</div>
{{ form.random_order|as_crispy_field }}
{{ form.answers_at_end|as_crispy_field }}
{{ form.exam_paper|as_crispy_field }}
{{ form.single_attempt|as_crispy_field }}
{{ form.draft|as_crispy_field }}
</div> </div>
<div class="mb-2">
{{ form.random_order|as_crispy_field }}
</div>
<div class="mb-2">
{{ form.answers_at_end|as_crispy_field }}
</div>
<div class="mb-2">
{{ form.exam_paper|as_crispy_field }}
</div>
<div class="mb-2">
{{ form.single_attempt|as_crispy_field }}
</div>
<div class="mb-2">
{{ form.draft|as_crispy_field }}
</div>
<!-- </div> -->
</div> </div>
</div> </div>
</div> </div>
<center> <button class="btn btn-primary my-4" id="{% if form.is_valid %}btn-transition{% endif %}" type="submit">Save &amp; Continue</button>
<button class="btn btn-lg btn-primary my-4" id="{% if form.is_valid %}btn-transition{% endif %}" type="submit">Save &amp; Continue</button>
</center>
</form> </form>
</div> </div>

83
templates/quiz/quiz_list.html
View File

@ -4,6 +4,7 @@
{% load static %} {% load static %}
{% block content %} {% block content %}
<style>.bg-light-warning{background-color: rgb(252, 217, 111) !important;}</style>
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb"> <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb"> <ol class="breadcrumb">
@ -15,70 +16,62 @@
</ol> </ol>
</nav> </nav>
{% if request.user.is_superuser or request.user.is_lecturer %}
<div class="manage-wrap">
<a class="btn btn-primary" href="{% url 'quiz_create' course.slug %}"><i class="fas fa-plus"></i> Add Quiz</a>
</div>
{% endif %}
<div class="title-1">Quizzes [{{ course|truncatechars:25 }}]</div>
<br>
<br>
{% include 'snippets/messages.html' %}
<div class="container"> <div class="container">
{% if messages %}
<div id="popup-box-messages">
<div class="box-messages">
<a id="popup-btn-messages" class="btn btn-light"><i class="fas fa-times"></i></a><br><br>
{% for message in messages %}
<div class="alert alert-{{message.tags}}">
{{ message }}
</div>
{% endfor %}
</div>
</div>
{% endif %}
<style>.bg-light-warning{background-color: rgb(252, 217, 111) !important;}</style>
<div class="header-title-md text-center">Quizzes [{{ course }}]</div>
<div class="title-line mb-5"></div>
{% if request.user.is_superuser or request.user.is_lecturer %}
<a class="btn btn-outline-primary br-2 mb-4" href="{% url 'quiz_create' course.slug %}">&plus; Add Quiz</a>
{% endif %}
<div class="row"> <div class="row">
{% for quiz in quizzes %} {% for quiz in quizzes %}
<div class="col-md-4 mb-4 mx-auto text-center"> <div class="col-md-4 mb-2">
<div class="card p-2 quiz-wrapper"> <div class="card p-2 quiz-wrapper">
<div class="d-flex justify-content-between align-items-center text-success mb-4"> <div class="d-flex justify-content-between align-items-center text-success mb-4">
<em class="text-left">{{ quiz.category|title }} Quiz</em> <em class="text-left">{{ quiz.category|title }} Quiz</em>
<div class="text-right info-text bg-danger" style="border-bottom-right-radius: 1px; border-top-right-radius: 1px;"> <div class="text-right text-light bg-danger px-2 small rounded">
{{ quiz.get_questions.count }} Questions {{ quiz.get_questions.count }} Questions
</div> </div>
</div> </div>
<!-- <p>{{ quiz.category|title }} Quiz</p> -->
<div class="card-title header-title-md">{{ quiz.title|title }}</div> <h6>{{ quiz.title|title }}</h6>
<!-- <div class="col-md-4 info-text bg-danger" style="float: right; width: auto;">
{{ quiz.get_questions.count }} Questions {% if quiz.description %}
</div> --> <p class="text-muted small">{{ quiz.description }}</p>
{% if quiz.single_attempt %} {% else %}
<p class="p-2 bg-light-warning">{% trans "You will only get one attempt at this quiz" %}.</p> <p class="text-muted small">No description set.</p>
{% endif %} {% endif %}
<p class="text-muted">{{ quiz.description }} here is the description of this quiz...</p>
<!-- <p class="lead">{{ quiz.get_questions.count }} Questions</p> --> {% if quiz.single_attempt %}
<!-- <div class="row text-success mb-4"> <p class="p-2 bg-light-warning small">{% trans "You will only get one attempt at this quiz" %}.</p>
<small class="col-6 text-left">{% trans "Category" %}: <b>{{ quiz.category }}</b></small> {% endif %}
<small class="col-6 text-right">Time set: <b>1:30</b></small>
</div> --> <div class="d-flex align-items-center">
<div class="d-flex">
<a class="btn btn-block btn-secondary w-100" href="{% url 'quiz_take' pk=course.pk slug=quiz.slug %}">{% trans "Start quiz" %} &raquo;</a> <a class="btn btn-block btn-secondary w-100" href="{% url 'quiz_take' pk=course.pk slug=quiz.slug %}">{% trans "Start quiz" %} &raquo;</a>
{% if request.user.is_superuser or request.user.is_lecturer %} {% if request.user.is_superuser or request.user.is_lecturer %}
<li class="dropup"> <div class="dropup">
<button class="btn btn-default bg-light ms-2" type="button" data-bs-toggle="dropdown"><i class="fas fa-ellipsis-v m-0"></i></button> <button class="btn btn-sm p-0 ms-2" type="button" data-bs-toggle="dropdown"><i class="fas fa-ellipsis-v m-0"></i></button>
<div class="dropdown-menu dropdown-menu-top-left" aria-labelledby="dropdown01"> <div class="dropdown-menu" aria-labelledby="dropdown01">
<a href="{% url 'quiz_update' slug=course.slug pk=quiz.id %}" class="update"><i class="fas fa-pencil-alt"></i> Edit</a> <div class="dropdown-item">
<a href="{% url 'quiz_delete' slug=course.slug pk=quiz.id %}" class="delete"><i class="fas fa-trash-alt"></i> Delete</a> <a href="{% url 'quiz_update' slug=course.slug pk=quiz.id %}" class="update"><i class="fas fa-pencil-alt"></i> Edit</a>
</div>
<div class="dropdown-item">
<a href="{% url 'quiz_delete' slug=course.slug pk=quiz.id %}" class="delete"><i class="fas fa-trash-alt"></i> Delete</a>
</div>
</div> </div>
</li> </div>
{% endif %} {% endif %}
</div> </div>
</div> </div>
</div> </div>
{% if forloop.counter|divisibleby:3 %}</div><div class="row">{% endif %}
{% endfor %} {% endfor %}
</div> </div>

11
templates/result.html
View File

@ -59,6 +59,7 @@
<tr class="success"> <tr class="success">
<td>{{ answer }}</td> <td>{{ answer }}</td>
<td><strong>{% trans "This is the correct answer" %}</strong></td> <td><strong>{% trans "This is the correct answer" %}</strong></td>
</tr>
{% else %} {% else %}
<tr> <tr>
<td>{{ answer }}</td> <td>{{ answer }}</td>
@ -112,14 +113,14 @@
<div class="card p-1" style="border: 1px solid #fd7e14;"> <div class="card p-1" style="border: 1px solid #fd7e14;">
<p class="lead bg-light p-3 text-orange"><span class="fa-1x">&CircleDot;</span> {{ sitting.result_message }}</p> <p class="lead bg-light p-3 text-orange"><span class="fa-1x">&CircleDot;</span> {{ sitting.result_message }}</p>
{% endif %} {% endif %}
<p><span class="fa-2x text-orange">&LongRightArrow;</span> {% trans "Review the questions below and try the quiz again in the future"%}.</p> <ul>
<li>{% trans "Review the questions below and try the quiz again in the future"%}.</li>
<p> <li>
<span class="fa-2x text-orange">&LongRightArrow;</span>
{% trans "The result of this quiz will be stored in your progress section" %} {% trans "The result of this quiz will be stored in your progress section" %}
<a class="text-primary" href="{% url 'quiz_progress' %}">Here</a> <a class="text-primary" href="{% url 'quiz_progress' %}">Here</a>
{% trans "so you can review and monitor your progression" %}. {% trans "so you can review and monitor your progression" %}.
</p> </li>
</ul>
</div> </div>

3
templates/snippets/filter_form.html
View File

@ -1,4 +1,4 @@
{% if filter.form %}
<form action="" method="get"> <form action="" method="get">
<div class="d-flex flex-wrap align-items-center"> <div class="d-flex flex-wrap align-items-center">
{% for field in filter.form %} {% for field in filter.form %}
@ -11,3 +11,4 @@
</button> </button>
</div> </div>
</form> </form>
{% endif %}

12
templates/snippets/messages.html
View File

@ -2,12 +2,16 @@
{% if messages %} {% if messages %}
{% for message in messages %} {% for message in messages %}
{% if message.tags == 'error' %} {% if message.tags == 'error' %}
<div class="alert alert-danger"> <div class="alert py-2 alert-danger">
<i class="fas fa-exclamation-circle"></i>{{ message }} <i class="fas fa-exclamation-circle me-2"></i>{{ message }}
</div>
{% elif message.tags == 'warning' %}
<div class="alert py-2 alert-warning">
<i class="fas fa-exclamation-circle me-2"></i>{{ message }}
</div> </div>
{% else %} {% else %}
<div class="alert alert-success"> <div class="alert py-2 alert-success">
<i class="fas fa-check-circle"></i>{{ message }} <i class="fas fa-check-circle me-2"></i>{{ message }}
</div> </div>
{% endif %} {% endif %}
{% endfor %} {% endfor %}