Upgrading the codebase using Laravel & ReactJS

• The flow will mostly remain the same.
• Please check the laravel-quiz branch to see it's progress and contribute.

Current code is live using ByetHost

Programming Multiple Quiz System

A simple Programming Quiz System containing-

• Instruction page
  • Student enters Roll No. here
• Quiz page
  • Timed-Quiz appears here
• Result page
  • Result of the user is shown here
• Login Page
  • Admin has to login here first.(admin, 12345)
• Admin page
  • All admin related functions are here!
• Videos
  • Users can also watch a video during the quiz. Or anything you want to display to them.

---

APIs used to enter and Display Programming codes

• CodeMirror In-browser code editor.
• SyntaxHighlighter JavaScript code syntax highlighter.

---

Coded & Tested using-

• XAMPP for Apache server and MySQL.
• Sublime Text for code editing.
• Firefox and Chrome browsers.
• Mac OSX & Windows.

---

How to install on your system-

1. Install XAMPP and make sure Apache Web Server and MySQL Database are running
2. copy-paste the quiz_system_git folder in htdocs folder associated with XAMPP
3. goto phpMyAdmin and create a database.
4. import the quiz database from database folder into it and make sure it has all 5 tables.
5. Truncate the tables to have clean database.
6. INSERT first admin in the admins database.
7. make required changes in scripts/connect_db.php
8. Get favicons-
   • visit faviconit (© 2013-2014 Eduardo Russo).
   • Upload atleast 200x200px img with maximum 1MB size limit.
   • click on favicon it! and download the zip file.
   • extract the faviconit.zip in the img folder.
9. Add videos in webm(video.webmhd.webm) and mp4(video.mp4) formats in videos folder.
10. login to the admin page using http://localhost/quiz_system_git/login.php
11. start the quiz @ http://localhost/quiz_system_git/

---

---

---

Features provided for the Admin in admin.php page-

• Clicking on your username in the navbar refreshes the page.
• Quiz Homepage opens the Instructions page in a new tab.

Manage Questions-

• Create a Question-
  • True/False - Create a Question with 2 options- True and False.
  • Multiple Choice - Create a Question with 4 options.
• View All Questions-
  • Shows all the questions of all the quizes on a single page along with the correct answers.
• Edit a Question-
  • Select one question from all the questions in all quizes to edit.
• Delete Some Questions-
  • Select as many questions as you want to delete from the database.
• Delete All Questions-
  • Deletes all the questions from all the quizes, but leaves the quizes intact.

Quiz Management-

You will see all your quizes lined up here.

• Add New Quiz-
  • Add a new quiz to the database and allot the Duration for the quiz, and Max no. of Questions to be displayed to the users.
• Further list contains QuizName along with the time and no. of questions allotted to it.

####### Hovering over a QuizName-

• Quiz Settings
  • Set Default - Sets the quiz as default i.e. it will be the one USER will be attempting.
  • Update Metadata - edit the Duration for the quiz, and Max no. of Questions to be displayed.
  • Delete this Quiz - Deletes the quiz along with all its questions.
• Manage Questions
  • View All Questions - Shows all Questions of the quiz
  • Edit a Question - Edit a single question from the quiz
  • Delete Some Questions - Delete some questions from the quiz
• Results
  • Result(Top 20) - Shows the top 20 Rank Holders.
  • Result(All) - Shows all the users, sorted according to rank.
  • Clear the Result - Delete all records of the users who took this quiz.

Settings

• Register an Admin
  • Register a new admin
• Change Password
  • Change password to your account
• Delete Your Account
  • Delete Your admin account
• Reset All Tables
  • Truncates all tables and sets one admin ID as default (admin, 12345)
• LogOut
  • Log out of your admin account.

---

Interface for Creating/Editing a Question

1. Select/re-select the quiz to which you want to add/transfer the question.
   • If there are no quizes in the dropdown, create a Quiz first.
2. Type/Change your Question.
3. If there's a program/code in the question,
   • Select/Change Language of the code
   • Add/Edit the code below
4. If adding a True/False Question-
   • Select the correct answer
5. If adding a Multiple Choice Question-
   • Write/Edit the 4 options(single lined) and choose the correct one.
6. Click Add to quiz/Save.

Interface for Viewing/SelectingForEdit/DeletingSome Questions

1. Quiz_Name is displayed above its question.
2. If there's code, it'll be displayed after the text part of the Question.
3. Options are displayed below.
4. Correct answer is Underlined and Emphasised!
5. You can select only 1 question for editing.
6. You can select any number of questions to delete.

Result Interface

1. List is already sorted according to their ranks.
2. Ranks are decided on the basis of highest marks first, followed by the time taken by the user to finish the quiz.
3. TimeStamp contains the time user started the quiz.

---

---

---

Features provided in other pages

# index.php(Instructions page)

1. Quiz name along with no. of questions to display and durations is displayed here.
2. An overlay is provided, currently used to display a video to the user while they wait to start the quiz.
3. User can't proceed without entering the username/RollNo.
4. User can't attempt the same quiz twice.
5. HTML can be edited to add your own rules and the like.
6. Right-click is disabled.

# quiz.php(Quiz page)

1. Quiz name is displayed on the top
2. Countdown is fixed & displayed on the top-right of the screen.
3. At zero the quiz will automatically be submitted.4.
4. There's no negative marking.
5. User can answer none, some or all the questions.
6. Code/Program will be displayed in color-coded format.
7. A confirmation dialog will pop-up if the user tries to close, refresh or navigate away from this page.
8. Right-click is disabled.
9. An overlay is provided, currently used to display a video to the user during the quiz.
10. User can't directly access this page.

# result.php(Result page)

1. Marks of the user are dosplayed here(1 mark per correct answer).
2. An overlay is provided, currently used to display a message to the user on click.
3. User can't directly access this page.
4. if user clicks on back and goes back to the quiz, he can't resubmit the quiz.

# login.php(Admin-Login page)

1. A user can login from multiple systems at the same time.
2. User can't access admin page before logging in.
3. Using sessions to store the session of an admin. Re-login isn't necessary as long as the admin doesn't click logOut.

---

---

Miscellaneous features

1. Using codemirror to have a better textarea input for programs/codes.
2. Using syntax highlighter to display the code better in a question.
3. A lot of MYSQL error checks are in place in case of some unknown error.
4. Basic failsafes are in place for things like SQL injection.
5. Layout is designed keeping different window sizes in mind.
6. It isn't designed to work on Internet Explorer also. So, it might be displayed differently on that(Styling difference).
7. None of the other pages can be accessed directly except the logout.php as it can only be accessed by the admin to logout.