Selecting combinations of items from Column A & B for unique results

Hi Everyone,

Could someone help me get started with a project like this? I’m assuming it would require working with Javascript.

The basic idea is that you pick an item from column A, and an item from column B to receive information about that particular combination.

Column A:

  • Diced
  • Chopped
  • Peeled

Column B:

  • Potato
  • Onion
  • Carrot

Choosing the combination of Diced and Onion takes you to a page about diced onions.
Choosing the combination peeled Potato takes you to a page about peeled potatoes.

This will require a little bit of JavaScript, but it isn’t too bad if you set it up correctly. Here’s a basic document I put together:

FoodCutting.hype.zip (79.0 KB)

Here’s the basics:

  • Each item in a column is a button; these all have a unique element ID corresponding to their name.
  • When you click a cut or food item, it will store the unique element ID in a variable (one for the cut, one for the food, aka your two columns). So basically the two columns have similar, but different, functions that will store what was clicked on. window.cut and window.food are the two variables.
  • Clicking on the button also will play 3 timelines: it will play one to highlight the button, and the two others will continue in reverse the other highlights, effectively making toggles.
  • Each scene is named based on the Unique IDs, so the scene for “Chopped” and “Potato” is “ChoppedPotato”.
  • When the “make it!” button is pressed, it will make sure a food and cut have been set, and if so will concatenate the unique element IDs and go to the scene.

Let me know if you have any questions about this! There’s a lot of different ways to do this, but this technique has a low amount of code.

3 Likes

Thanks so much Jonathan! This is perfect for me to get started!