Request a tiny app again

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > Request a tiny app again

Sad Panda: Sep 22, 2004; I'm a Sad Panda.

Humble Request
Problem: I'd love my students to be able to practice bubble sort in a gamey way. I have an old Windows program that works, but it is a little clunky and not portable. https://www.dropbox.com/s/h28hfy5j2qs0rrr/Sorting_Algorithms.zip?dl=0 is a link if you would like to see it. I've attached a quick screenshot. It'd be really useful for my students - and I know lots of other teachers that'd love to have it too.

Description and requirements: A browser-based game that randomly generates a list of numbers and asks the user if according to the algorithm they should swap or not. At the end of a pass it asks if they have finished the sort or they need a new pass. If they are wrong, they lose a life. Users get three lives for a level. Run out of lives? Game over.
Level 1 - 4 numbers
Level 2 - 6 numbers
Level 3 - 8 numbers
Level 4 - 10 numbers
Level 5 - 10 numbers, timed. At the end it tells them their time. It keeps track of this so they can try to set a new best later on.

In terms of platform - I was assuming that client-side JavaScript embedded in an HTML file is the easiest/best option. Nothing fancy that involves a server to keep track of scores or anything like that is required at all. If I could host it on my website or just have the students open an HTML page off the school local network that'd be fantastic.

Nice to have features: An insertion sort option would be great too as that's the other sorting algorithm that students have got to understand.
It'd be mainly for use in lessons on a desktop. If it were to scale to function on a phone-sized display that'd be amazing to let them practice outside of the class.

Hopefully I've explained it clearly. Let me know any questions and I'll clarify anything.

Only registered members can see post attachments!

# ¿ Aug 13, 2021 19:45

Adbot: ADBOT LOVES YOU

# ¿ May 21, 2024 03:15

Sad Panda: Sep 22, 2004; I'm a Sad Panda.

ephphatha posted:

This is a really basic implementation, only bubblesort for now and no fancy styling/instructions. It's a single html file that you can download and run anywhere and should work in any reasonably modern browser. Using only basic HTML and JS concepts so it'll use default browser alerts for feedback/prompts, I was mainly interested in knocking something up with no dependencies so hopefully someone else can do a prettier version if that's desirable.

https://ephphatha.github.io/html-sort-game/sort.html - instructions.

Lovely, thank you for knocking that together. Some quick feedback about functionality...

1. Big thing - They should swap when first element < second element. If they don't (ie swap when shouldn't or don't swap when should) - "You need to swap these items. Lose a life." / "You don't need to swap these items. Lose a life."
2. Minor - If the list isn't sorted but they say it is, it currently says "The list is not sorted, keep going." Could you let them know they lost a life? - "You must continue making passes until you do a pass without making a swap. Lose a life."
3. Query/Alternate idea - Is it possible to give different options than OK/cancel or is that just a consequence of using the default alerts? Maybe as an alternative - at the end of the pass could have two buttons become visible to the right of the current list. Finished / New pass.
4. Improvement idea - If they finish a pass and need a new pass could you add a new line for the current pass like in the attached picture? It really helps visualise the progress of the sort.

Only registered members can see post attachments!

# ¿ Aug 14, 2021 16:58

Sad Panda: Sep 22, 2004; I'm a Sad Panda.

ephphatha posted:

1, 2, 4 are all easy done, I've updated the js to handle that. Apologies for missing that requirement, I didn't actually download the program you linked to so I had/have no idea what the existing behaviour is like.

3 is because of the use of default alerts. Browsers don't give any room for customising these simple dialogs so a different approach is needed to make it more user friendly. Your suggestions sounds good, I was mainly trying to avoid having buttons appear/disappear repeatedly on the page as it make the logic slightly more complicated and I'm lazy. Would you be comfortable having the buttons always be visible? Do they need to appear to the right of the lists or would it be acceptable to have Skip/Next/Finished/New Pass buttons in a row?

I've updated the hotkeys and embedded the instructions on the page below the buttons, same link as before.

Thank you, those changes are fab and make it that much better.

If making the buttons only show at the end of the pass is annoying, then leave it with the dialog box. I'd prefer to have them presented with the choice (via buttons or dialog box) at the end of a pass as that's when they should be considering that question.

One thing that's not in the logic which ties in with that is...

- A bubble sort is not considered finished until all the items are sorted AND a pass has been finished without any sorts (which is how it knows that all the items are sorted). Sorry that I didn't mention that above.

Could you change the check that you do at the end to take that into account? One way is just keep a flag if there has been a swap or not, if it's the end of the pass AND there's not been a swap (given the live system forces them to swap if they should) then it's sorted and they are ready to stop.

Think it'll basically be done then.

# ¿ Aug 16, 2021 09:44

Sad Panda: Sep 22, 2004; I'm a Sad Panda.

ephphatha posted:

Most of the state has been handled by css classes and the dom itself so I've added ".dirty" as a class for (the first of the pair of) items which have been swapped. This isn't made visible with a style rule or copied to the history, but could be done if you wanted to make it more visible by adding a rule to the style section similar to the following:
code:
item.dirty {
	background-color: red;
}
I could also polish the visuals a bit and move away from browser alerts, given this started as a quick hack I went simple . I'll play with improving it when I have time so if there's any particular layout for the prompts you had in mind that'd be helpful.

Thank you for that update I've been playing around and here's the next bit of feedback.

3 bugs
1. If you have successfully completed the sort (finish a pass correctly without swapping) and tell it you need a new pass, you should lose a life, but don't. "You finished a pass without making a swap. The list is sorted. Lose a life."
2. Minor visual thing - If you swap the final element in the list, "Have you finished sorting the numbers" comes up before the numbers are updated on the page.
3. Inconsistent behaviour - If I should swap, but tell it not to swap I lose a life and stay on the same two elements. If I shouldn't swap, but tell it to swap I lose a life and move on to the next two elements. Could you make it so both are like the first one - it doesn't progress until you get the choice right?

Idea
Not sure how it would work, but some kind of 'realistic' mode could be neat. That would have the background-color for items on the current row be the same as the font. This would emphasise the idea that the computer can only see/compare two items at a time. It could be enabled with a tick box.

Styling
In terms of styling, could we make the following changes? Having the background colour on the selected item makes them stand out nicely. Adding a light border to each item makes it look more like a list/array. Not sure of the CSS, but I'm guessing there's a way to 'pad' the rows so there's a couple of pixels between one row and the next so it doesn't look like one big table?

code:

        item {
            border: 1px solid;
        }

        item.selected {
            background-color: aliceblue;
            border: 2px solid;
        }

I've been using it on my computer and keyboard works pretty much perfectly so haven't been touching the buttons. I think buttons would be more useful if I were to be using it on a mobile device. I think that adding them (turning them from invisible to visible) to the collection of buttons when required is the best option if we go down that route.

# ¿ Aug 21, 2021 18:10

Sad Panda: Sep 22, 2004; I'm a Sad Panda.

Looking for a simple Web based app.

https://www.learncomputing.org/sound.php

This currently shows an analog wave and you can change the sample rate and bit depth. That's a nice first part.

What I'd like, that it draws the digital wave on there. Even better, it could show the binary underneath that it'd get sampled to.

# ¿ Oct 10, 2022 22:24

Adbot: ADBOT LOVES YOU

# ¿ May 21, 2024 03:15

Sad Panda: Sep 22, 2004; I'm a Sad Panda.

null_pointer posted:

On an unrelated note, I am looking for an app that will vibrate my phone every x seconds for y number of times. I'm a little bit OCD when it comes to brushing my teeth.

Seconds Pro could definitely do this. Used for interval training and can give alerts at the end of each interval be they spoken or vibration.

# ¿ Oct 17, 2022 20:47

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > Request a tiny app again