Propose A better speaker note and main content view.

[moaminsharifi]

After talking in #1441 , I worked a little bit on it and maybe we need to restructure our Speaker (Teacher) and Student view.

With consideration that there are several personas who use this book, the focus is on the Teacher and Student scenarios and personas.

The teacher sits behind a laptop (small screen only for the teacher) and is connected to a projector or a TV (big screen mainly for students).

Other platforms with similar scenarios, how do they handle it?

Canva.com
Put a controllable view for handling popups in small screens.

Here is an example of a presentation with the title "AI for humans, an introduction to AI for midschool students by Amin Sharifi".

Google presentation also has similar way to control

My proposed method:

before start code and make any PR, I want to know is that change acceptable?

Technically, we need to make the book more SPA-ish and handle some events by own pages instead of default behavior.

In this part, I'm only using vinyla JS.

[djmitche]

A few notes:

• The speaker notes are usually pretty long, so those should occupy the bulk of the teacher view
• This course is not always taught in a classroom, so please do not over-emphasize the laptop-and-projector scenario. It is often taught remotely (e.g., via Meet), and many students study the course without a teacher.
• In many cases, the teacher can already see the slide content onscreen -- either in another window or (if teaching in-person) on the projector screen. So we should not reproduce this content in the teacher view (or at least, make that an option).
• It's not clear what's in the "side bar" in your mockup/method?
• In Comprehensive Rust v2 #1073 we are adding timing information for slides. I see timing info in your screenshot. It would be good to incorporate this into the teacher view for comprehensive-rust as well. The timing for comprehensive-rust is not especially strict, so perhaps a per-second countdown is too much. Maybe "Expected: 5m / Elapsed: 3m" or something like that.

I suspect that folks taking the course without an instructor would prefer to stick with the simple HTML view, or even print the course. In terms of the implementation, I wonder if this would make sense implemented as a renderer different from the html renderer, to allow that flexibility.

[mgeisler]

Hey @moaminsharifi, thanks for continuing to look into this!

@djmitche has some good points. When teaching at Google, we present the content of a browser tab: that is your student view on the right. The speaker notes then visible in another tab (the popup you get today).

I normally arrange the two windows so that the slide takes up the most space and then I only skim the notes a bit on demand. I agree with Dustin that we probably don't need to reproduce the current page in the note window — and the notes are often too large for this.

I think the desired features are

• Clean view for presentations. This is the highest priority actually: without it, the notes would be disturbing and unwanted.
• Good and robust synchronization between the state of the notes and the UI buttons. That's the thing that fails today with my home-grown JS code 🙂

[mgeisler]

As for printing the course, we now have #1572!