Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UI] "preview as student" option for teachers #3374

Closed
Felienne opened this issue Oct 4, 2022 · 12 comments · Fixed by #4822
Closed

[UI] "preview as student" option for teachers #3374

Felienne opened this issue Oct 4, 2022 · 12 comments · Fixed by #4822
Assignees
Labels
approved Issues we would love to see addressed teachers Issues related to the teacher's UI

Comments

@Felienne
Copy link
Member

Felienne commented Oct 4, 2022

Idea incl level

It will be a lot of work but it would be great if we could have a "view as student" button in the Teacher's UI where a teacher can see exactly what the interface will look like for students (I do this my opening a second browser but that is kind of cumbersome).

This is quite a common features in such teacher tools.

@Felienne Felienne added the teachers Issues related to the teacher's UI label Oct 4, 2022
@TiBiBa
Copy link
Collaborator

TiBiBa commented Oct 6, 2022

I can take a look at this! We might have to discuss this a bit before I start working on this:

  • Do we want to add a button to the customizations page (or the class overview page?)
  • How do we enable the teacher to return to their own profile view
    • Maybe implement an apart routing to view the levels
    • Instead of /hedy/<level> something like /hedy/preview/<class_id>/<level>

Maybe the easiest solution: When the teacher selects 'preview as student' we simply add the teacher as a student to their own class. This way everything is automatically rendered as expected. When using the return option 'overview button, close page old' remove the teacher from the class again.

@Felienne
Copy link
Member Author

Felienne commented Oct 6, 2022

  • Do we want to add a button to the customizations page (or the class overview page?)

I think it only makes sense for customized classes (otherwise teachers can just go to /hedy themselves)

  • How do we enable the teacher to return to their own profile view

    • Maybe implement an apart routing to view the levels
    • Instead of /hedy/<level> something like /hedy/preview/<class_id>/<level>

That would be lovely! And then add a button or link to go there on the customization page.

Maybe the easiest solution: When the teacher selects 'preview as student' we simply add the teacher as a student to their own class. This way everything is automatically rendered as expected. When using the return option 'overview button, close page old' remove the teacher from the class again.

Ah yeah that would be an easy way to make it work with not too much effort!

But I guess we can also grab the customizations from the database (we already have them to populate all the checkboxes) and use those to render the /hedy/preview/<class_id>/<level> page? That might be a bit less "depending on voodoo"?

@sfayyad
Copy link
Contributor

sfayyad commented Nov 10, 2022

Hi! If this is still open, I would love to be assigned to the issue and work on it!

@Felienne
Copy link
Member Author

@sfayyad yes it is still open! It would be great if we could get this to work but it will be very complex (for front and back-end work), so it might be hard to get started? Maybe you want to pick up an issue with the good first issue label first?

@sfayyad
Copy link
Contributor

sfayyad commented Nov 10, 2022

It is complex; however, I have experience working on tasks similar to this, so I believe I can do it!

@Felienne
Copy link
Member Author

Great, if you think you can do this, go for it! We'd be happy to have this feature!

@Felienne Felienne added the approved Issues we would love to see addressed label Dec 2, 2022
@Felienne
Copy link
Member Author

Felienne commented Oct 5, 2023

Hi @jtwaleson!

If you are looking for a front-end issue that would add a lot of value, this would be awesome!

@jtwaleson jtwaleson self-assigned this Oct 16, 2023
@jtwaleson
Copy link
Collaborator

jtwaleson commented Oct 16, 2023

@Felienne I'm going to take a stab at this this week, but it's quite complex and I'll probably have some questions while implementing.

First questions: I'm assuming we only want to view the class, and not impersonate any specific students to "see what they see"? So if we write it as a user story it'd be something like:

"As a teacher I want to see what a customized class looks like as a student so that I can preview it before I open it up to my students."

Is my understanding correct?

Do we want to make this fully read-only, or are you able to also run some programs while in "preview mode"?

@yilmazdurmaz
Copy link
Contributor

Consider these:

  • I am not sure if you implemented it knowing, or if it is a side effect, but a teacher can join in their own classes as students. I have used this (and still using) to test score setting on quizzes, level locks, etc.
  • I haven't actually tested what happens if teachers have their own adventure layout, but I fear it won't work as expected because my account is a teacher's.

Then I would suggest two things to have:

  • make teachers a student of their own classes (invisible to students) by default
  • modify pages to have an extra check (and switch button) for teachers to go "non-teacher" view mode, which will become student's view when combined with above. (if is_teacher and as_teacher show view_teacher?!)

@jtwaleson
Copy link
Collaborator

Thanks, that's helpful context! I haven't looked at the teacher UI much so far so I'll start by exploring that.

@yilmazdurmaz
Copy link
Contributor

to find the current way fast, in the class view (create one if none), use "add student" -> "invite by username", write your own username. then you will get notification of the invite and join in upon accepting it.

@Felienne
Copy link
Member Author

As discussed in the meeting today, we would already be happy with just viewing, editing might not even add value, but certainly is not necessary to move this forward for now.

@mergify mergify bot closed this as completed in #4822 Dec 18, 2023
mergify bot pushed a commit that referenced this issue Dec 18, 2023
**Description**

Adds a preview mode for teachers, so when they create a class they can view Hedy as if they were a student in this class.

Fixes #3374

This is a draft PR, please let me know if this is roughly the right direction. Once we confirm that I'll add:
- some tests
- make the banner "Preview Mode" look nicer
- add translation keys

**How to test**

Step 1 - Go to For Teacher page. Make sure you have a class with some customizations, like less programs for level 1. Press the "Preview" button.

![Screenshot from 2023-11-29 12-09-57](https://github.com/hedyorg/hedy/assets/1298565/24a1056a-f4e7-4910-a2fa-a37a609a9d39)

Step 2 - You should go to /hedy and see the loaded class including a banner "Preview mode".

![Screenshot from 2023-12-18 13-45-47](https://github.com/hedyorg/hedy/assets/1298565/c7ac4b5e-314b-487a-9023-866e63190ba1)


The previous version of this design is [here](https://github.com/hedyorg/hedy/assets/1298565/a13ac70d-5524-435a-884a-061164e3160d).

Step 3 - You can complete the programs and puzzles as if you were a student

Step 4 - When you exit preview mode the banner should disappear and you should go back to the /for-teachers page.


**Checklist**
Done? Check if you have it all in place using this list: (mark with x if done)

- [ ] Contains one of the PR categories in the name
- [ ] Describes changes in the format above
- [ ] Links to an existing issue or discussion
- [ ] Has a "How to test" section
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
approved Issues we would love to see addressed teachers Issues related to the teacher's UI
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants