Quiz It Phase 1

Overview

The QuizIt project is designed for you to apply and deepen your cumulative understanding of the fundamentals of Rails and ReactJS. As the name suggests, the QuizIt project is a quiz application. You will be building this project as part of our Ruby on Rails.

When writing Rails & React and code, ensure you enforce the standards mentioned in Learn Ruby on Rails and Learn React courses.

Pre-requisites

You can clone the wheel repository to start with your application. Usage of NeetoUI is mandatory.

General instructions

The provided design should serve as a solid foundation for building the entire application, but the way you design and implement the features is up to you. All elements of the design should be included in the app, but UI/UX adjustments are acceptable if there are strong, well-reasoned justifications. If there are gaps in the requirements and design, fill them sensibly. Additionally, make sure to account for different edge cases in the application.

Requirements

Below are the listed components required for the application:

Admin dashboard

The dashboard consists of a table displaying the list of quizzes. When no quizzes are present, an empty state should be displayed.

Header: Should include a search bar and a button to add a new quiz.
Sidebar: Should feature three icons representing Quizzes, Settings, and Public page. At the top, above the icons, there should be a non-clickable logo for the organization. The sidebar must be collapsible, allowing users to toggle between an expanded and collapsed state. Each icon should be clickable, directing users to the corresponding page, with each page having its own URL that reflects the active page. Towards the bottom of the sidebar, the user's avatar should be displayed

Expanded sidebar

When the sidebar is expanded, users should have options to filter quizzes by All, Published and Draft. Clicking these options will update the table to display only quizzes with the selected status, and the dashboard heading will change to reflect the selected status.

At the bottom of the expanded sidebar, an option for the user to sign out must be present, along with the user's name and email.

Add new quiz pane

When the Add New Quiz button in the dashboard header is clicked, a pane should open, prompting the user to enter a name for the new quiz. The pane contains two buttons: Save and Cancel The Save button should be enabled only when an entry is present; otherwise, it should remain disabled. Form validation is required wherever necessary.

Quiz creation

Upon landing on this page, no questions will be displayed initially. A button labeled Add New Question will be available, which redirects the user to a new question creation page.

The title of the quiz must be editable. On clicking the title, it should switch to inline edit mode. You can refer to the InlineInput component for the behaviour.

Question builder

By default, four options will be provided. Clicking the Add Option button will add another option. Each question must have at least 2 options but no more than 6. A radio button beside each option allows the user to select the correct answer, and only one correct answer is allowed per question.

There are two buttons: Save and Save & add a new question. These buttons should be enabled only when a question is present, at least 2 options are provided, and a correct answer is selected. The Save button redirects back to the quiz creation page, while the Save & add a new question button navigates to a new question builder page.

Quiz page

On the quiz page, you will see a list of the created questions. Each question has a dropdown with options to clone, edit, or delete. The deep_cloneable gem can be used for cloning questions.

In the header, once questions are added, the quiz is autosaved. A Draft saved at [autosaved date and time] message should appear. The quiz can be in either a published or draft state. When the Publish button is clicked, the draft save message should disappear. Next to the "Publish" button, there will be a Copy Link icon button, allowing you to copy the link to the quiz's public page.

Quizzes table

The quizzes table will have the following columns: Name, Submissions Count, Created On, Status, and Category. It will also include a column with a dropdown menu.

The Name column contains the quiz's name. If the name is too long, it should be truncated and suffixed with an ellipsis. A tooltip can be used to display the full name when it is truncated. The name should serve as a link to the edit page for that quiz.
The Category column indicates the category of the quiz. Each quiz can belong to only one category, but a category can have multiple quizzes.
The Status column reflects the quiz's status, which can be either Draft or Published. The status should always be capitalized.
The horizontal menu icon in each row is a dropdown with options that adjust based on the quiz's status. Regardless of the quiz's status, the dropdown will always include the options to Clone and Delete. If the quiz is in a Draft state, the dropdown will additionally include the option to Publish. If the quiz is in a Published state, the dropdown will include the option to Unpublish. Before deleting a quiz, a proper confirmation alert must be displayed to the user to ensure the action is intentional.

Filters

At the top right of the admin dashboard, there are two buttons: one for filtering quizzes by name, category, or status, and another for showing or hiding table columns. By default, the quiz name column is disabled in the show/hide columns option. Filtering by name, category, and status should be reflected in the query parameters. The category input must be a searchable input field.

Once filtered, the applied filters for name, category, and status should be displayed at the top of the table, along with a button to clear these filters. This behaviour is not required for table column filters.

Bulk actions

The user should be able to select specific rows using the checkbox next to each row. Clicking the checkbox next to the column name should automatically select all rows. Once quizzes are selected, the section of the header that allows column filtering will be replaced with bulk action options. There are three bulk actions available:

Change Category: This action allows the user to update the category of the selected quizzes to a specified category. A searchable select interface should be provided for choosing categories.
Change Status: This action allows the user to update the status of the selected quizzes. It can be implemented using a dropdown menu.
Delete: This action allows the user to delete the selected quizzes. Proper warnings should be given before deletion, and edge cases must be handled appropriately.

Submissions

The submissions are displayed in a table format with the following columns: Name, Email, Submission Date, Correct Answers, Wrong Answers, Questions, and Status.

The Name and Email columns display the name and email of the user who completed the submission.
The Submission Date column shows the date and time when the quiz was submitted.
The Correct Answers and Wrong Answers columns indicate the number of correct and incorrect answers, respectively.
The Questions column lists the total number of questions in the quiz.
The Status column reflects whether the user has completed the quiz, indicating either Completed or Incomplete.

Additionally, the table includes filters for each column, allowing users to search and narrow down submissions based on specific criteria. A show/hide columns option must also be present.

Download report

The user should be able to download the report of the submissions in the table format. Upon clicking the download button, a modal with a progress bar will appear, indicating the status of the report generation. Once the process is complete, the report will be automatically downloaded.

Settings

In the Settings tab, the quiz title, essentially the organization name, can be modified. This title will be displayed on the public page of the quiz.

Public pages

Quizzes are associated with an organization, and users are members of that organization. The public page can be accessed without logging in. There are two types of users: standard users and admins. A standard user cannot sign in or sign up and is treated as a guest. Only admins have access to the admin pages. For the current application, there will be a single organization to which all users belong.

The public page should be the default landing page of your application. It can also be accessed via the sidebar on admin pages. When clicked, it should open the public page in a new tab.

Public dashboard

The public dashboard displays a list of quizzes, with the organization's name shown in the header. A Login as admin button is also present in the header. Quizzes can be filtered by category or searched by name using the search bar.

User registration for quiz attempt

When beginning to attempt the quiz, the user must fill in their full name and email address. This user will be registered as a standard user, and their information must be unique in the database.

Quiz attempt

The quiz attempt pages will display questions one page at a time, with the last page featuring a Save and submit quiz button. Once this button is clicked, the quiz is marked as complete, and the results are displayed. The Back to home button in the result page takes the user to the public dashboard page. Below are all the variants of this process.

Sign in page

The Login as admin button leads to the sign-in page. If the user has not signed up, they can do the same.

Sign up page

If a user has attempted a quiz, they are registered as a standard user. It is important to note that the same user (with the same email address) cannot also be an admin user.

Additional key points to note:

Ensure model and controller tests are added. Only those two types of tests are required by default. If services, workers or carriers are employed, ensure they are thoroughly tested as well.
Try to ensure that the test coverage is at least 97%.
Invalid URLs must be properly handled using custom 404 pages.
When building a form, ensure that buttons are enabled only after the user interacts with the form fields. The Cancel button should reset the form values to their initial state, providing an easy way to undo changes. Implement proper form validations to ensure the input data meets the required criteria, and display clear error messages for any invalid inputs to guide the user in correcting their entries.
All the filtering logic should be handled at the backend.
You can use Pagy gem for pagination.
Ensure that if you are using Postgres, then you use UUIDs instead of Integer IDs for identifying and tracking entities. Refer. SQLite doesn't support UUIDs.
Feel free to explore new gems and incorporate them into the application if required. However, refrain from prematurely optimizing code for performance or efficiency before it is necessary or without a clear understanding of the performance requirements of the system.