[SOLVED] Piano notes memorization app - logic implementation

[cakeheke]

Hello, I’m trying to create a small app which enables a student to test/memorize the key/note positions of each key on a piano.
The idea is to have a random piano key letter/name generated, then displayed, in a text box so the user can push the corresponding key on a virtual piano, which I will have drawn inside the app, using rectangle shapes (or maybe images).
If the student presses the correct rectangle/key/note which corresponds to the randomly generated key name, they will get a point added to their score.
The keys/notes on the piano will be as follows - C C# D D# E F F# G G# A A# B

What I need help with is…

• How do I implement the checking of the randomly generated letter (eg C) against the selected key/rectangle.
  In other words - how do I check if they have chosen the correct key/note/rectangle.

• How can I make this app have no user accounts, (eg have a temporary account). I don’t want people to be put-off from having to register first, but possibly have the option to register if they desire to keep a running record of their progress.

• I want the first randomly generated key/note/letter to happen after the press of the start button, but I want the next ones to generate after the user presses a key/rectangle/note.

• Do I have to use the database in order to make this possible?

I have tried many times to implement this. I have also done a lot of searching/reading. Once I have worked out how to implement this, I will be attempting to do the same thing for the guitar and also for the music notation staff, so this will not be a one-off project. Privacy is not applicable in this App.

Here is a screenshot of a very rough sketch of the apps main section…

[jordanfaucet]

Yes, I would create a data base. It can be simple.
I do not know how familiar you are with the editor - but I will try to explain my thoughts on possible sequencing, it will at least be a general blueprint:

For data:
Type = Piano Notes
Specific note = text

Then go in to app data, and create new entries.

Eg. "Create new specific note (text) = C# " (You will have to type in C# )

…

Now for the interface in the editor:

Drag and drop a Repeating group - set it to fixed number of cells = 1
Put a text box, inside the group.

Set the groups data to: Piano notes/ Specific notes AND sort the data of the group Randomly

• make it so that the text box (inside the group) displays the data as well (C, C# etc)

^ that will be the visual representation that students will see: now they will need to replicate it via the virtual keyboard.
Lets say that the above group is called: Current Note ( in your visual example - it would be the “result message” box)

…
For the piano keys:
You can create them as shapes - then build workflows, so that the keys correlate with a specific note.

Example workflow: for a negative result:

When this shape is clicked (lets say the shape is C#) and Current Notes value is not "C# > animate the shape

^ that is an example of if the student clicked the wrong key, the key could shake or something - to imply an incorrect selection

For a positive result:
When this shape is clicked and Current notes value is y (Y= whatever you determine it to be…) > show check mark icon > show next of Current notes

^ if you set the current notes group to display results randomly - and have it so that the group type is a fixed number of cells ( 1, in this case)
When a user selects the right key - the value will change.

…
When you figure that out ^ you will discover ways to associated points for right/wrong answers via the database.

As for user accounts, my above example assumes that they are none existent . They are not neccessary, unless you wish to build upon your app in a way that allows users to see the progress they have made and other metrics etc.

• I would consider have the Current Note value (once again, in your case : “result message”) have a random note value by default rather then requiring a user to click start… it doesn’t make much of a difference.
  If you do not want that though, you can just drag and drop a shape to cover your “result message box” then program a workflow so that when a user clicks the start button > hide the shape

Hope that helps. That is a tricky one to explain over text haha

[cakeheke]

Thankyou very much for your time and effort.
That makes sense to me, I am familiar with the editor.
I will put that into my program and see how I go with it. I’ll post back here with my success and let you guys know where my thought process had gone wrong.

Yeah - explaining some things via text can be very tricky, especially if something can be taken multiple different ways.
Thanks again, it’s much appreciated.

[jordanfaucet]

Hey, no worries!

I’m glad I could offer some brainstorming help for this logic.
Its a cool app idea! I have not seen an example of an app like that, yet.

Cheers

• Jordan

[cakeheke]

Problem solved. It all works fine now.

There was a couple of places where I was going wrong.

• I wasn’t using a repeating group for the text fields.
• I was structuring the data incorrectly by storing the note names as separate “fields” rather than as separate “entries”.

Thanks for the help, have good one.

[denverdave11]

hey cool app man!

[cakeheke]

Thanks man, I could hardly believe an app like this didn’t exist already.

[cakeheke]

Hi, I thought I had it right, but have run into a problem. At the bottom of this comment is a link to the ‘test app’ with which I have created a page with the functionality. As you will see - when I press the correct button/key/note, that button becomes the new “selected” note, despite the message box changing to reflect the repeating groups selected note.
I’ve tried many different ways, but generally get stuck with this type of incorrect functionality.

• could you please fix up the functionality with the correct functions, so I can see where I’m going wrong.

Here’s the link… test app

Thanks

[jordanfaucet]

Oh yeah. I do see what you are saying!

I don’t know if I gave you the impression; but I am actually not a moderator or a Bubble whiz by any means…

But I will certainly play around with it and see if I can figure it out!

[jordanfaucet]

So - something is wrong with the data relationship - there doesn’t seem to be the right correlation between the letter in the database and the buttons themselves, because “Button B” says correct, regardless of what the text from the repeating group is saying.

Possibly if you use groups for the buttons (doing so you are able to set a data source) - if you look at the workflow now; you will see an experiment that I am running with, to try and solve the issue (I have made the workflow red)

Keep the app in the forum - I will help try and figure this out tomorrow morning. I’m trying to shut things down by 10pm - or it will take me hours to fall asleep haha (seriously…)

[cakeheke]

Thanks man, you’re a legend for helping me out. I know what you mean by not being able to sleep if you do too much thinking too late at night. Talk to you tomorrow.
p.s - the information you gave me in your first reply has helped me get a better grasp of Bubble, so that’s great.

[jordanfaucet]

So here is what I can say: first of all I have not figured it out yet But I am seeing what the issue is…

So maybe other Bubbler can have a look - I’ll try again later - but its a tedious problem and sucking a lot of brain power haha.

^ in this screenshot - I have associated each button with a specific note via constraints (which to me makes sense, because now it just needs to synchronize with the repeating groups note)

Here is the problem I am seeing though:

^ getting the synchronicity to be definitive if where I am struggling

There are two Items in the data base A and B
And if the current cell of the group is sorting Randomly (in the editor) which it is.

using workflows - either first item / last item / or random item/ must be selected

But if the repeating group is sorting randomly - then to get the workflow of the button to randomly select the repeating groups random selection and make a match! Is confusing.

And using the first item: and :last item functions correlates to the data base - but if they are being randomized by the repeating group it get thrown off again!

I may be overthinking - but I got to take a break from this problem haha
I’ve always been bad with the debugger anyway - another bubble user may solve this problem quicker. I’ll poke at it again later tonight

Sorry I couldn’t be more help right now

…
Edit: So I created a “Phantom group” that basically serves as an isolation chamber - so that a variable can be recognized as concrete.

the “Correct” and “Wrong” sequencing is working properly from what I can tell -
This issue now is: even when the repeating group is asked to “show next” – a new value is not being produced and I don’t know why…?

[jordanfaucet]

Awwhh God its working!
It’s woor-oor-oorking !!

For something that appears to be so simple - that was exceeding tricky… Rather then explain what I did (because with the amount of trial/error, I hardly even know myself what I did haha) - have a look at the test app - and feel free to ask a question.

The user experience is not great - because there is only two variables (the A might be randomly selected several times in a row)

But it will likely be better as you add more notes into the equation

Cheers

[cakeheke]

Yaaaaaaaaaaaaaaayyyyyyyy
Thankyou so much, man.
I also dedicated a lot of brain power to this. I’ve actually learned to code in Python and C# and I could implement it in those languages with relative ease. I like the non-coding approach to programming though, so I decided to get proficient in Bubble. I’ll stick with Bubble.

I’ll now take a look at what you’ve done and work out where I was going wrong. I’m looking forward to finding out how you solved it.

Thanks for your help, hopefully I can become proficient enough to help others on the forum in the future.

[jordanfaucet]

No worries!

Its possible that one of the custom workflows or set-state workflows is unnecessary though; so play around with it. Since it was working, I didn’t bother trying to fine tune it.
And there’s no phantom group anymore… (if you are looking for it).

Ya man Bubble is just genius! I’m not actually a coder at all; Id have a hell of a time just writing a static webpage haha… I’m all about the visuals.

[cakeheke]

Ahhhhhhhh - I see what it was.
I was supposed to use the “set state” workflow, instead of the “show next” workflow.
Now I feel pretty simple-minded to have not worked it out myself. It’s very easy now.

Man - you are a legend. I won’t forget that you helped me.

Cheers.