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>

83
templates/accounts/add_student.html
View File

@ -15,19 +15,7 @@
<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">
@ -35,59 +23,23 @@
<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>
@ -95,17 +47,10 @@
<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">

107
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,22 +15,25 @@
</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">
<div class="col-md-3 mx-auto">
<div class="card p-2">
<div class="text-center">
<img src="{{ user.picture.url }}" class="w-100">
<ul class="px-2 list-unstyled">
<li>{{ user.get_full_name|title }}</li>
<li><strong>Last login: </strong>{{ user.last_login|date }}</li>
<li><strong>Role: </strong>
{{ user.get_user_role }}
</li>
</ul>
</div>
<hr>
{% if request.user.is_superuser %}
<div class="btn-flex">
{% if user.is_student %} {% if user.is_student %}
<a class="edit-btn" href="{% url 'student_edit' pk=user.id %}"> <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> <i class="fas fa-user-edit"></i><span class="mobile-hide">Edit Profile</span>
@ -37,31 +44,16 @@
<i class="fas fa-user-edit"></i><span class="mobile-hide">Edit Profile</span> <i class="fas fa-user-edit"></i><span class="mobile-hide">Edit Profile</span>
</a> </a>
{% endif %} {% endif %}
<!-- <a class="edit-btn" href="{% url 'change_password' %}"><i class="fas fa-lock"></i><span class="mobile-hide"> </div>
Change password</span> {% endif %}
</a> --> </div>
</div> </div>
{% endif %}
<div class="row justify-content-between"> <div class="col-md-9 mx-auto">
<div class="col-md-3 mx-auto">
<div class="card"> <div class="card">
<img src="{{ user.get_picture }}" class="dashboard-img"> <div class="card-body">
<div class="program-description"> <!-- {% if user.is_student %}
<p><strong>Last login: </strong>{{ user.last_login|date }}</p> <p class="form-title"><i class="fas fa-book-open"></i>Enrolled Courses</p>
<p><strong>Full Name: </strong>{{ user.get_full_name|title }}</p>
<p><strong>Role: </strong>{{ user_type }}
</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
{% if user.is_lecturer %}
<p class="form-title"><i class="fas fa-book-open"></i>My Courses</p>
<div class="dashboard-description"> <div class="dashboard-description">
{% if courses %} {% if courses %}
<div class="flex"> <div class="flex">
@ -70,34 +62,50 @@
{% endfor %} {% endfor %}
</div> </div>
{% else %} {% else %}
<div class="text-danger">No courses!</div> <div class="text-danger"><i class="far fa-frown"></i>No courses!</div>
{% endif %} {% 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 %}
<div class="text-danger">No courses assigned!</div>
{% endif %}
<hr>
{% endif %} {% endif %}
<p class="title-info"><i class="fas fa-user"></i>Personal Info</p> <p class="fw-bold"><i class="fas fa-user"></i> Personal Info</p>
<div class="dashboard-description"> <div class="dashboard-description">
<p><strong>First Name:</strong> {{ user.first_name|title }}</p> <p><strong>First Name:</strong> {{ user.first_name|title }}</p>
<p><strong>Last Name:</strong> {{ user.last_name|title }}</p> <p><strong>Last Name:</strong> {{ user.last_name|title }}</p>
<p><strong>ID No.:</strong> {{ user.username }}</p> <p><strong>ID No.:</strong> {{ user.username }}</p>
</div> </div>
{% if user.is_student %} {% if user.is_student %}
<p class="title-info"><i class="fas fa-graduation-cap"></i>Applicant Info</p> <hr>
<p class="fw-bold"><i class="fas fa-graduation-cap"></i> Applicant Info</p>
<div class="dashboard-description"> <div class="dashboard-description">
<p><strong>School: </strong>{{ student.get_student_school }}</p> <p><strong>School: </strong>Hawas Preparatory School</p>
<p><strong>Program: </strong>{{ student.program }}</p> <p><strong>Level: </strong>{{ level.level }}</p>
<p><strong>Level: </strong>{{ student.level }}</p>
</div> </div>
{% endif %} {% endif %}
<p class="title-info"><i class="fas fa-phone-square-alt"></i>Contact Info</p> <hr>
<p class="fw-bold"><i class="fas fa-phone-square-alt"></i> Contact Info</p>
<div class="dashboard-description"> <div class="dashboard-description">
<p><strong>Email:</strong> {{ user.email }}</p> <p><strong>Email:</strong> {{ user.email }}</p>
<p><strong>Tel No.:</strong> {{ user.phone }}</p> <p><strong>Tel No.:</strong> {{ user.phone }}</p>
<p><strong>Address/city:</strong> {{ user.address }}</p> <p><strong>Address/city:</strong> {{ user.address }}</p>
</div> </div>
<p class="title-info"><i class="fa fa-calendar-day"></i>Important Dates</p> <hr>
<p class="fw-bold"><i class="fa fa-calendar-day"></i> Important Dates</p>
<div class="dashboard-description"> <div class="dashboard-description">
<p><strong>Last login:</strong> {{ user.last_login }}</p> <p><strong>Last login:</strong> {{ user.last_login }}</p>
{% if current_semester and current_session %} {% if current_semester and current_session %}
@ -105,10 +113,13 @@
{% endif %} {% endif %}
<p><strong>Registered Date:</strong> {{ user.date_joined|date }}</p> <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> <input class="btn btn-primary mt-3" type="submit" value="Save">
<center><input class="btn btn-outline-primary mt-3" type="submit" value="Save"></center>
</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>

47
templates/question.html
View File

@ -18,10 +18,10 @@
</ol> </ol>
</nav> </nav>
<div class="container"> <div class="title-1">{{ quiz.title|title|truncatechars:25 }}</div>
<br>
<div class="header-title-xl text-center">{{ quiz.title|title }}</div> <div class="container">
<div class="title-line mb-2"></div>
{% 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>
</div>
<div class="modal-body">
You can't go back to the previous question after you submit it, You can't go back to the previous question after you submit it,
so double check your answer before proceeding to the next one! 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-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Understood</button>
</div>
</div>
</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', () => {
document.getElementById('popup-box-messages').style.display = 'none';
}) })
} instractionModal.show();
</script> </script>
{% endblock js %} {% endblock js %}

21
templates/quiz/mcquestion_form.html
View File

@ -14,11 +14,10 @@
</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 }}
</div>
<div class="mb-2">
{{ form.figure|as_crispy_field }} {{ form.figure|as_crispy_field }}
</div>
<div class="mb-2">
{{ form.explanation|as_crispy_field }} {{ 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-lg btn-primary my-4" type="submit">Save</button> <button class="btn btn-primary my-4" type="submit">Save</button>
</center>
</form> </form>
</div> </div>

38
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="card-body">
<!-- <div class="container"> --> <!-- <div class="container"> -->
<div class="mb-2" hidden> <div hidden>
<label for="course">{{ form.course.label }}</label><br> {{ form.course }} <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> <span class="danger">{{ form.course.errors }}</span>
</div> </div>
<div class="mb-2">
{{ form.category|as_crispy_field }} {{ form.category|as_crispy_field }}
</div>
<div class="mb-2">
{{ form.title|as_crispy_field }} {{ form.title|as_crispy_field }}
</div>
<!-- <div class="mb-2"> <!-- <div class="mb-2">
<label for="max_questions">{{ form.max_questions.label }}</label> <label for="max_questions">{{ form.max_questions.label }}</label>
<input class="form-control" type="number" name="max_questions" min="0" id="id_max_questions"> <input class="form-control" type="number" name="max_questions" min="0" id="id_max_questions">
<span class="danger">{{ form.max_questions.errors }}</span> <span class="danger">{{ form.max_questions.errors }}</span>
<small class="d-block text-muted">Number of questions to be answered on each attempt.</small> <small class="d-block text-muted">Number of questions to be answered on each attempt.</small>
</div> --> </div> -->
<div class="mb-2">
{{ form.pass_mark|as_crispy_field }} {{ form.pass_mark|as_crispy_field }}
</div>
<div class="mb-2">
{{ form.description|as_crispy_field }} {{ form.description|as_crispy_field }}
</div>
<!-- </div> --> <!-- </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="card-body">
<!-- <div class="container"> --> <!-- <div class="container"> -->
<div class="mb-2" hidden> <div hidden>
<label for="questions">{{ form.questions.label }}</label><br> {{ form.questions }} <label for="questions">{{ form.questions.label }}</label><br> {{ form.questions }}
<span class="danger">{{ form.questions.errors }}</span> <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> <small class="d-block text-muted">Hold down "Control", or "Command" on a Mac, to select more than one.</small>
</div> </div>
<div class="mb-2">
{{ form.random_order|as_crispy_field }} {{ form.random_order|as_crispy_field }}
</div>
<div class="mb-2">
{{ form.answers_at_end|as_crispy_field }} {{ form.answers_at_end|as_crispy_field }}
</div>
<div class="mb-2">
{{ form.exam_paper|as_crispy_field }} {{ form.exam_paper|as_crispy_field }}
</div>
<div class="mb-2">
{{ form.single_attempt|as_crispy_field }} {{ form.single_attempt|as_crispy_field }}
</div>
<div class="mb-2">
{{ form.draft|as_crispy_field }} {{ form.draft|as_crispy_field }}
</div> </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>

79
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">
<div class="dropdown-item">
<a href="{% url 'quiz_update' slug=course.slug pk=quiz.id %}" class="update"><i class="fas fa-pencil-alt"></i> Edit</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> <a href="{% url 'quiz_delete' slug=course.slug pk=quiz.id %}" class="delete"><i class="fas fa-trash-alt"></i> Delete</a>
</div> </div>
</li> </div>
</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 %}