Checking dropdown selection in a html widget element

Using JavaScript with Hype
1

Hello hype fans!

I have attached a hype doc where i am having trouble checking the selections of three dropdowns in three html widgets. I would like to play one timeline when all three selected are correct and another timeline if one or more of the selections are wrong. I have tried my best to create a variable that takes the selected from each dropdown but I was unsure exactly how to do this correctly. I am sure my approach is far too simplistic and the syntax is wrong. If anyone could be kind enough to take a look at my attached document and point me in the right direction, I would be hugely grateful.

Thanks in advance!
checkSelectedDropdown.hype.zip (14.5 KB)

2

Hmm..

I recognise the code you are using in the widgets. I used it in some projects a while back.
It pretties up the select elements.

I remember it being a little bit of a pain to use on multiple select elements because it was not designed to be discriminate on which elements it is building a display for if there are more than one select element.

The widgets get around this because the code is effectively sandboxed in each so no clash happens.
But you run in to all the other issues of widgets and iframe where communication back and forth with the parent doc can be complex.

So I would use normal rects. ( I mean keeping the code you have rather than do it how I would actually do this )

Putting the code and styles as you have done in each rect.
for the custom-select elements. We make each one unique and change the styles and code accordingly.

We can then search for each class name and its select element and get its selected index

var resultOne = document.querySelector('.custom-select1 > select').selectedIndex;
				var resultTwo = document.querySelector('.custom-select2 > select').selectedIndex;
				var resultThree = document.querySelector('.custom-select3 > select').selectedIndex;
				 
 					if (resultOne == "1" && resultTwo == "2" && resultThree == "3" ){
				
				hypeDocument.goToTimeInTimelineNamed(0, 'wrong')
				hypeDocument.startTimelineNamed('correct', hypeDocument.kDirectionForward)
				
						} else {
				hypeDocument.goToTimeInTimelineNamed(0, 'correct')
				hypeDocument.startTimelineNamed('wrong', hypeDocument.kDirectionForward)
				
					}

checkSelectedDropdown MHV1.hype.zip (31.2 KB)

This is a quick look at this and I have tried to keep it close to what you have.
Also I noticed some glaring errors in your hype function, :smile:

You may want to read up on javascript basics. There are a few suggestions on the forum on where to do that.

2 Likes
3

Thanks Mark. That's super kind of you to solve this for me. Agreed - my javascript skills are pretty woeful :smile: but I am learning!

Thanks again for your time on this, it is much appreciated.

2 Likes