|
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.
|
# ¿ Aug 13, 2021 19:45 |
|
|
# ¿ Apr 17, 2024 22:34 |
|
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. 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.
|
# ¿ Aug 14, 2021 16:58 |
|
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. 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 |
|
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: 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:
|
# ¿ Aug 21, 2021 18:10 |
|
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 |
|
|
# ¿ Apr 17, 2024 22:34 |
|
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 |