I'm currently working on an editor for an interactive quiz program my mates have worked on. The quiz has interactive questions that require the user to interact with a passage (i.e. the photo below has a "passage select" question).
Currently, I've been designing an editor for the quiz and it seems like there are four important workspaces to be incorporated:
- Navigation Bar to maneuver through lessons and its questions
- A question editor that also allows users to link to a passage
- A live preview where users can see what the quiz will look like in real time
- A passage section that users can edit and also more easily how and what content to connect too
Currently, I've incorporated 1, 3, and 4 into my designs, and I'm wondering how to incorporate the passage section into the interface, without jumbling the workspace.
I've gotten feedback that the passage editing section should take precedence over the live preview, so I was wondering how I could harmonize everything together.
I have taken a look at this post and I've thought about potential solutions:
Squeeze all 4 workspaces into one screen and have them be adjustable (similar to Adobe, Google Web Design) - difference though is that those have live preview has a high-priority feature, while in my case, it's more of like icing on the top
Have tabs to switch between live preview and the passage.
Have the live preview be more of a floating feature, kind of like the floating workspaces in Adobe that can be minimized or maximized or the mini video of Zoom.
Place the live preview or passage editor selection in the same workspace as the question editor (similar to editing and making posts on StackExchange!) Downside I see is that the user would have to do a bit of constant scrolling to see either a preview or the passage editor (like I am right now)
Any thoughts or feedback would be appreciated!