Rethink layout for Question page

[austintackaberry]

Right now the design/layout looks clunky. Given that the explanations could get long, it might make sense for them to be below the navigation buttons, so that there is no limit to how long they can be.

We should make sure that the navigation buttons stay in the same location regardless of how long the question is, whether the explanation is shown or hidden, etc.

Maybe the navigation buttons should be to the right/left of the question rather than below it?

Open to other ideas, just think the current layout needs some help!

[nikrb]

I was thinking put the buttons at the top so the question could grow as needed. Perhaps consider putting the buttons in the sidebar?

[austintackaberry]

Yeah, the top could work. If the buttons were to the right/left of the question, they would be arrows or something instead of traditional buttons. We could do some sort of animation as well.

[kevinYCKim33]

How about something like this?

The explanation goes under the Q section, and we can make it scrollable if it's a particularly lengthy explanation?

[kevinYCKim33]

Here's what it could look like in mobile.

[kevinYCKim33]

https://www.codecademy.com/skills/uk-quizzes

[austintackaberry]

Thanks for showing this, it's nice to see how similar sites handle the layout. The main difference is that is specifically a quiz which means that users typically go from start to finish. I view YDKJS Exercises as more like practice problems where you can see your progress which means users may want to go back and forth between questions.

Just thinking out loud...we could maybe handle that functionality in the sidebar? Maybe if you are answering questions for Up & Going/Chapter 1 then in the sidebar, you see chapter 1 below Up and Going, and then the list of questions below that. Perhaps, the question you are on currently is highlighted, and you can click to go to other questions. You also have the option to minimize the questions. Thoughts?

That would allow us to not have to worry about the navigation buttons in the main page. We could instead just have a "Next" button right next to the "Submit" button

[rreubenreyes]

I really like that idea. I think you should be able to fully navigate the app using the sidebar as well. Using the current sidebar as an example:

1. The sidebar's top-level elements are user progress and a list of all books.
2. Each book list item contains a list of chapters for that book. This list is collapsed by default and opens on click.
3. Each chapter list item is also collapsed by default, and when clicked reveals a list of questions.
4. Each question then links to the appropriate page view.

[kevinYCKim33]

Something like this then?

[kevinYCKim33]

This is toggled from the top navbar, but I think this translates well to Austin's idea of showing what book you're on, then showing what chapter, and then what question you're on, as well as displaying if the question had been completed or not.

I do still like the way the Question page is laid out for codecademy though. It'd be nice if we could incorporate some of the aesthetics of it while still implementing going back and forth between questions and letting the users see their progress.

[austintackaberry]

Yeah, that is like a perfect picture of what I was thinking! It would be difficult to implement, but that's what makes it fun right :wink:

[kevinYCKim33]

Hmm...yeah! Would we need users to log in if we want to implement this kind of complicated sidebar?

[rreubenreyes]

I think we could implement it even without having user functionality set up, then modify it later to work with whatever permissions we want to give when users are logged in/out 🙂