In plain words, describe what is happening in the JS interaction:
Group 1
Group 2
Group 3
Step 1
Open up the page
Type a word(name) into the text box
Step 2
Go to Console(inspect)
Type something into input area
Detect key when pressing Enter
Step 3
Press Enter(on the page)
Hit enter
Loop through first four letters of the name
Step 4
Background turns blue in return
Returns(and confirms) the text you entered
Associate each letter to an image
Step 5
Console gives information on what happened along with the page itself
Outputs four images corresponding to each letter
Step 6
Input: Enter Output: Blue Background
Clear the result in input text box
In your groups, brainstorm how you can modify/reimagine/hack this code to create something new.
How might the design change if…
Group 1
Group 2
Group 3
you were designing for a visually impaired(older, color blind, blind) audience.
Different audio per color(output) can be used, different colors that can be seen with the font color, and bolder type/bigger type size.
Text could be spoken when it is returned
Tarot cards could be higher contrast if not already, and including descriptions of their visual contents.
you were designing for a group of hip teenagers trying to see why learning to code could be interesting.
After pressing‘Enter’, more then just the background color changes to show more possibilities of what code can do.
Add memes
Chat feature(think Discord style/elements?)
Animations
Changing the visual language to be more aesthetically pleasing and cohesive
you were designing for a group of children aged 8 to 10
Change the style in css. Use bold and round typefaces, create popup windows or notes after each tab, make the cobalt blue color less saturated and more diverse if possible.
Simplified yet highlighted text and instructions(similar to the design and usability of Scratch)
Adding more illustrative and colorful images with more instructions and explanations about each step, since children might not understand the current tarot cars.
you wanted to keep the core functionality but have a totally different subject matter and narrative?
Different buttons on the keyboard can be pressed to make/show different outputs, right now you can press other buttons but they don’t do anything. Adding a different color, image, shape, and etc.
The program could give you prompts to answer. Core function is the same, but with very different intention
Pokemon card deck generator, more playful and less to do with more serious topics such as fate
incorporate an element of randomness to the project?
Apply some unexpected outcome to a specific keyboard.(ex. image that is related to blue or certain effect(gradient) comes up when pressing letter‘g’, etc)
A random response is generated(from a selection of pre-assigned responses) when user inputs text/data. Similar to a customer service chat room.
Adding more tarot cards, not limited to 4. Also using other instructions for input aside from name to get a reading. Perhaps where you live, or something more specific like what you’re dealing with, something that reflects to the real experience a reading.
use audio in a meaningful way?
Audio can help guide the person on what to do, what they see, and how get into the console.
Have the words read back out loud to the user
Adding sound effect when magician cards show up, or when we click and flip over the cards.
add an additional interaction in a meaningful and controlled way?
Have the color change in response to different inputs.
Inputting a word would display a link to the definition of the word on Merriam Webster
Clicking to flip the tarot cards for reading its detailed meaning
use language in a different way? what would it say and why?
Change”Enter” to a more user-related word. In the console, ask“what’s the mood of the day”. Instead of“You just pressed‘Enter’”, answer in: I’m feeling blue today.
Responses to input could be in line with a character/character profile e.g. a robot would respond more logically than a human impersonating AI(like Siri or Alexa).
Change“Type your name to get a reading” to something like“reveal your fate by inputting your name” to provide a more mystified feel to the experience. I’d also utilize more language in writing descriptions for the cards as not everyone knows what they are.
brainstorm a few other ideas for either extending the project or speaking to a different audience
Might be able to works as a flash card with words for infants to learn about colors. Also, on pressing a letter on the keyboard there could sound be a sound that helps the infants learn the pronunciation of the letter.
When pressing a button audio expresses what you pressed
Type can be more expressive and less default
By changing background colour to random/set(on click), the code can be used for purposes such as making teams
could be a language learning app that responds to audio and/or written input(e.g. corrects pronunciation, grammar etc.)
-cohesive visual language and theme
-rather than inserting your name maybe it could be based on a quiz to make results seem more intentional?
-change the font style to feels more magical or handwritten presence
Additional Input/Output References
In-Class Activity: Brainstorm