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.

Sign up for GitHub

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

Jump to bottom

[UI idea] Change the puzzle interface to make dragging easier #4442

Closed
MarleenGilsing opened this issue Aug 31, 2023 · 2 comments · Fixed by #4924
Closed

[UI idea] Change the puzzle interface to make dragging easier #4442

MarleenGilsing opened this issue Aug 31, 2023 · 2 comments · Fixed by #4924

Comments

@MarleenGilsing
Copy link
Collaborator

As I'm working on making more puzzles I notice how it's quite a hassle to drag the lines of code to the input screen. Especially if the codes are getting longer.

Is it maybe possible to put the lines where you have to fill in your answers next to the place where they start? (Like in the mock-up I made below)
image

This would make it much easier to drag the answers, but it might mean we need an extra button (or two) to get the code from the "answer place" to the input screen. I do think it might be a nice touch if the kids could see the lines from the puzzelcode into real code (so without the seperation between the lines.
@jpelay
Copy link
Member

jpelay commented Sep 3, 2023

I like this!

So to be clear with the requirement, you mean like a preview of the resulting code into a real read-only editor that the kids can execute it and see it a little bit better?
Something like this?

PXL_20230903_220916912~2

I was also thinking that maybe we could make the UI a little bit more puzzle-like, with the pieces having a little bit more depth and the places where you put them look like little holes where you put the pieces.

@jpelay jpelay changed the title [UI idea] Change the puzzel interface to make dragging easier [UI idea] Change the puzzle interface to make dragging easier Sep 3, 2023
@MarleenGilsing
Copy link
Collaborator Author

Yes! That looks perfect!

@jpelay jpelay mentioned this issue Dec 22, 2023
Merged
7 tasks
@mergify mergify bot closed this as completed in #4924 Jan 2, 2024
mergify bot pushed a commit that referenced this issue Jan 2, 2024
@jpelay
[UI] Switch read only editors to code mirror (#4924)
9af0447 
**Description**

We are currently using CodeMirror in the main editor, and Ace in the read-only editors, this situation is not ideal since we need to maintain two wildly different highlighting systems, therefore this PR switches all the editors to use CodeMirror.

This is the current state of the replacement:

* [x] Example editors in the level page
* [x] Editors in the quiz's questions
* [x] Parsons
* [x] Explore page editors
* [x] Create your own adventure page's editors
* [x] Common mistakes page of the teacher's manual
* [x] Editors in the Cheatsheet page (fixes #4935)

**About Parsons**

The parsons exercises where deeply coupled with Ace, and the dragging code was difficult to understand. In order to switch these editors to CodeMirror it was necessary a redo of most of the code, therefore, this PR also fixes #4442 because we are now using the Sortable library, making the dragging easier. This is the parson interface now:
![image](https://github.com/hedyorg/hedy/assets/45865185/305b93ea-1b8e-40a0-bdd8-1302b3168a08)

Now students can simply shuffle the lines in place, instead of dragging them from one place to the other.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
Hedy organization board
Status: No status
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[UI] Switch read only editors to code mirror jpelay/hedy
2 participants
@jpelay @MarleenGilsing