Match styling of nearly every page to be consistent + major functionality bug fixes to connect pages together w/out crashing

[alexchen2]

This is more or less an extension to #123 alongside numerous major last-minute bug fixes and modifications throughout the application, since I wasn't able to modify the styling for every page at the time due to other open PRs back then. Note that ~some pages still need to be modified thematically, such as the profile and dashboard pages~ the teacher dashboard page was not modified stylistically or functionally, due to a lack of time (so teacher dashboard buttons to redirect to lessons, quizzes, and such will not work).

Changes Made:

• Modified styling of the leaderboard, quiz results, student dashboard, and profile page to match that of other pages (e.g. lesson, quiz, login/register)
  • Added error-handling in the case that teachers access the leaderboard page (in accessing student-specific values like points)
  • If number of users on the leaderboard is less than 7, then filler rows will be added to fill up the leaderboard (prevents empty space near the bottom of the page)
  • Fixed leaderboard number to actually work by adding an additional filter to its corresponding query in main.py (now, it's not just eternally stuck at 1; it should be properly synced up to the table on the right)
  • Fixed dashboard page to be SIGNIFICANTLY more responsive than it was before, so now the page doesn't break if you slightly resize the page; in addition, the layout is modified to a more vertical arrangement of panels on mobile and tablet displays.
  • Added a very basic layout for the profile page, to at the very least not look like a website that's missing its CSS files
• Modified Mithun's flask shell command such that by running flask --app run_app.py clear-db, all answers in the response.json file are also cleared (or the file is created if it doesn't exist, for whatever reason)
• Added redirect button to quiz results page that takes the user back to the dashboard
• Modified quiz page and quizSubmit.py such that the quiz page actually sends out a "/submit" request from quizSubmit.py, registers the responses within reponses.json, and redirects to the quiz results page with the user's results.
  • The format of the quiz questions in questions.json was slightly tweaked to keep track of corresponding quizzes' topic number, and an additional quiz question was added to match that of the current demo/placeholder quiz ("Prime Factorization")
  • Modified top try-except blocks for checking JSON files so that a file isn't found, then a new one will be created instead
  • Filtered out responses.json in .gitignore
  • SubmitQuiz() was modified to extract question and answer info from the string query within the quiz page request, and the user's answers are properly checked against the corresponding quiz in questions.json (currently hardcoded to be the placeholder quiz number=1, topic=2)
  • Points now work, somewhat! The current user's points are increased based off of their score and the maximum number of points given by a particular quiz; these changes are also reflected on the leaderboard table and the student dashboard's various panels
• Created a new route in main ("quiz_result") to display the user's results, rather than have render the page directly from quizSubmit.py's /submit route (otherwise, the quiz answers will be visible through the url query string, and the user can exploit an infinite points duplication glitch by refreshing)
• Modified lessons page to support youtube video embeds; Lesson.video_filename string must contain the prefix "youtube:", with the Youtube video ID following right after. For filenames without the "youtube:" prefix, then the app will just assume that it's the filename of a locally stored video file.
  • To demonstrate this feature, Topic 1 and 3 of Module 1 have had their placeholder videos replaced with videos on their specific lesson topic (from Khan Academy's channel).
• Fixed leaderboard page link in header
• Removed badges link from main header row (already within profile submenu)
• Fixed leaderboard panel display on main dashboard, link up lesson and quiz buttons to redirect to their actual respective pages
• Added redirects for student and teacher dashboards for the header dashboard link, if a given user role accesses the wrong dashboard type
• Edited placeholder quiz content to match the dashboard button prompt (prime factorization), so as to make more sense when demoing the app
• Added placeholder JS alerts when clicking on unused/dead-link header and dashboard buttons (Pricing, Badges, Dashboard Challenge button)
• Modified points display on profile, dashboard, and leaderboard pages to update more frequently (20-30 seconds, instead of a minute)
• Other minor miscellaneous visual fixes/bugs (e.g. oversized containers, fix progress bar number display, etc.)

[zareentk]

Primary reviewer @EricMBu

[alexchen2]

NOTE: To help avoid any database operational errors when testing the code (these arise from any inconsistencies in DB entries where unnullable entries are being nulled/not being filled, or vice versa), try running Mithun's flask shell command in the terminal in ./app/ before running flask --app run_app.py run, so as to drop and regenerate all DB tables + user quiz response JSON data: flask --app run_app.py clear-db