apainintheneck / sql-study Goto Github PK

Right now the content on the lecture.ejs, dashboard.ejs and quizzes.ejs pages is left aligned which looks weird when the page is full screen. It might be good to increase slightly the width of the content boxes and center them on the page. I'll take a look at this and see if I can fix it.

It'd be nice to update the sandbox styles to look like the rest of the site.

I think that a new column should be added to the user table to indicate whether a user is an admin and then a separate piece of middleware needs to be created to protect all admin pages.

Additionally, it would be nice to add some way to grant users admin privileges and add buttons to the sidebars that allow admin users to quickly move between the admin and user parts of the site.

I think that this is probably low priority for now because it is a change that users should never see.

The answer to the fill-in-the-blank question doesn't really make sense.

For the sandbox I was planning on combining sql.js with grid.js. Essentially, sql.js would be used to spin up a sqlite database on the frontend and grid.js would be used to display the results of the queries.

Before starting to build this out I went looking for examples and it turns out that sql.js has an example implementation which does a lot of what we want our sandbox to do. You can look at it in action here and the code can be found here. As you can see it includes a bunch of nice features and the only downside in my eyes is that it doesn't preload a database and the tables it produces are ugly and ill-suited to larger datasets. This example is free to use under the MIT License so in theory we could just try to get this working and then build on top of it.

Here is what I think we should do.

1. Start by trying to get this example running on our website in the sandbox section as is.
2. Add grid.js to display the tables in a more intuitive and user friendly way.
3. Add a choice of a prebuilt sql schema or an empty database instead of the current empty database with a preloaded query.

Let me know what you think about that.

While testing today, the tester and I noticed that the final line did not require a semicolon to run properly. Missing a semi-colon anywhere else throws an error.

I added the progress bar as a sort of stand in for a featue. The real question is: how do we want to track user progress and display that information back to the user?

The lecture page is where all the chapter contents from the backend are displayed to the user. Here is what I was thinking.

1. Create copy of dashboard.ejs file.
2. Modify styles so that there is a space to display content on page next to the sidebar.
3. Use internal APIs to grab chapter titles and display them to the user.
4. When a chapter is clicked, it should open the first page of the chapter.
5. Use internal APIs to grab pages individually from server or grab all the chapter contents in one go.
6. Use marked.js to convert markdown page content to html and then insert that html on the page along with the title.
7. Display pages one at a time with back and forward buttons which display next page or go back to chapter list depending upon the point in the chapter.

The question that I have is should we split the chapter table of contents page and the content pages into two separate .ejs files with different routes. Also, the internal APIs are documented in the app.js file on the get /chapters and get /pages routes.

Now that I think about it a little more it might be easier to have a sort of table of contents page with links that send a get request to the same route and provide the chapter_id as a parameter so that the chapter contents page can be displayed.

Dropdown menus for sidebar that expand to show quizzes 1-4 and lectures 1-4 for quick navigation.

This page would need to look like the dashboard.ejs, quizzes.ejs and lecture.ejs pages and a link to it would need to be added to it's own section at the bottom of the sidebar.

It would include links to resources where students can learn more about SQL.

This link on the index.ejs page needs to be updated to point to the sign up page.

Currently, there is a dead link to an /about page. in the top navbar of the index. This issue could be extended to generally restyling the top bar on the index page.

The way the lecture section is set up, the content doesn't expand to fill the whole white area

At the moment, the chapter.ejs page works but it doesn't look that great. The biggest issue is that the images and videos bleed out of the content container. Also, do we want it to look more like the dashboard.ejs page? I think at the very least we should have the content be in a container that doesn't bleed and have the title centered and in a bigger font at the top with a break between it and the rest of the text.

1. Change name of navbar.ejs to sidebar.ejs and update EJS include statements in dashboard.ejs and sandbox.ejs.
2. Update links in sidebar. At the moment, they all point to #.
3. Remove unused html elements.

At the moment, 85% of the code in the repo is CSS because there is an old bootstrap CSS file called login-bootstrap.css which is only being used to style the login.ejs page. It is more than 8,000 lines of CSS of which I'm sure very few lines are being used.

1. Decide on whether we are going to use the login.ejs page to allow user login. I know that Deep is working on the login part of the website right now so this page might not be necessary.
2. If we are keeping the page, see if it's possible to replace the file with an equivalent one from a CDN.
3. If that's not possible, try to reduce the size of the file manually.

During user testing the tester mentioned that they think it would be nice if there was some sort of user guide that tells people how to navigate the website. Do you guys think that would be a good idea? Where would we put it? On the dashboard page?

The important thing here is to figure out how to add the sidebar to these quiz pages because otherwise they don't really fit with the rest of the site design. I played around with it for half an hour and wasn't able to get anything to work but I'm sure there is a solution out there.

This will involve adding a new API route to the backend to get that information about a logged in user or that information may be available by looking at the local cookie. The other thing that could be done is to do all that on the backend by inserting it into the page using ejs.

The name would need to show up on the dashboard page at the very least. It might not be advisable to add it to the sidebar because different size names may mess up the styling.

When I created the quizzes section and the 4 quiz pages I mistakenly used an old version of bootstrap. The code for these pages needs to be edited since there are elements that won't work with the newest bootstrap version.

As seen here, even after fixing and re-executing, the message stays on screen.

I just noticed that there are some small bugs on the about page related to the team member included in the project. It looks like Harsandeep's name is spelled wrong and Deep's and Jeannie's photos went poof. These were photos hosted on the school website if I remember correctly so it would probably be best to just embed them directly in the application.

You can see the issue here: https://sqlstudy.herokuapp.com/about

This is what it looks like.

At the moment, when a page or chapter is added or edited, the user is returned back to the main /admin route.

Is that desirable or would it be better to return them back to the same edit or add page?

Either way, the page the user is returned to should have a message displaying that the page or chapter was submitted successfully. This could be written using EJS and by passing the title of the chapter or article to the .ejs template in question. This would be an improvement over the current system which doesn't give the user any feedback about the success of their submission.

What do you guys think about adding the footer in a card below the content on the /dashboard, /lecture, and /quizzes pages? It wouldn't be hard to implement at all. The question is whether that's the place the put it and we think it goes best there.

I think that these page look kind of empty other than the login and sign up parts of the page. Is there any way we can make better use of all that empty space?

I downloaded the database that is auto-populated into the sandbox and then clicked choose file to upload it, and it didn't contain all the information. Instead, there was a simple select statement seen in the included screenshot. I don't think it is functioning as intended.