Hardware components | ||||||
 |
| × | 1 | |||
| × | 1 | ||||
Software apps and online services | ||||||
 |
| |||||
 |
| |||||
 |
| |||||
Thanksgiving is a time to gather and spent time with family. And for our family, that means playing board games, trivia games. So as a tech gadget person in our family, I introduced Echo Buttons to our gatherings. We all had fun!
My kids loves to color with crayons. We play 3 color challenge contest where All drawings may contain only three colors. No more, no less. Randomly pick 3 colors and finish coloring in 3 minutes. It's challenging and creative play.
So when I was thinking about games for Echo buttons, I started reading about how to change colors of buttons. You know, It's like the Hello World of Internet of Things. Blinky lights. How to change the button lights. How to turn it on, do the blinks, flashes.
I started Reading sample code available. What colors are possible? As a web developer, I'm familiar with CSS colors, hex codes and all that. I got excited when I found it's the same way to change colors. Cool.
Then I started searching names of colors and came across the w3schools site about Names of Crayola. The color names ranges from creative to funny to Like... Where did that names came from? Who come up with these names? I was laughing at some of them - Alien Armpit, Sunburnt Cyclops, Big Foot Feet, Tickle Me Pink, Macaroni and Cheese
Trivia: The Macaroni and Cheese crayon was named by a pasta-loving 6-year-old.
According to this huffington post article: "Another famous color was named by a 12-year-old Sam Marcus, who drew small facial expressions to correspond with each new crayon. His “laughter” face was colored pink because, Marcus told HuffPost in an email, he’d blush when someone tickled him as a kid. Hence Tickle Me Pink was born."
The Purple Mountain’s Majesty crayon was named by an 89-year-old Mildred Samson — proving that coloring knows no boundaries.How about making it a game?
Then it dawned on me, this would be a fun game to hack. I want them to learn different kinds of color. I want them to realize that the world is full of colors.
So I started with the Trivia Template, followed all the instructions and deployed it.
https://github.com/alexa/skill-sample-nodejs-buttons-trivia
Played it a few times.
Then I followed the instructions on how to customize the buttons trivia.
Then I started changing the questions to
question: 'What is the name of this crayon?',answers: ['Eucalyptus', 'Alien Armpit', 'Screamin Green', 'Forest Green'],correct_answer: 'Alien Armpit'
I based all the questions and answers from the w3schools site.
https://www.w3schools.com/colors/colors_crayola.asp
New crayons are renamed, updated and created every time. Some of these crayons maybe outdated. It's still fun.
It looks something like this
module.exports = Object.freeze(
{ questions_en_US: [
{
index: 1,
question: 'What is the name of this crayon?',
answers: ['Eucalyptus', 'Alien Armpit', "Screamin' Green", 'Forest Green'],
correct_answer: 'Alien Armpit'
},
{
index: 2,
question: 'What is the name of this crayon?',
answers: ['Princess Perfume', 'Bubble Bath (Tickle Me Pink)', 'Carmine', 'Wild Strawberry'],
correct_answer: 'Princess Perfume'
},
{
index: 3,
question: 'What is the name of this crayon?',
answers: ['Jasper', 'Orange', 'Ogre Odor', 'Jelly Bean'], correct_answer: 'Ogre Odor'
}
]});
After changing the questions, I uploaded it. Test it again. It's working. Cool.
How can I store the color? How about adding it to the list of questions.
question: 'What is the name of this crayon?',answers: ['Eucalyptus', 'Alien Armpit', 'Screamin Green', 'Forest Green'],color : "#84DE02"correct_answer: 'Alien Armpit'
It would look something like this.
module.exports = Object.freeze({
questions_en_US: [
{
index: 1,
question: 'What is the name of this crayon?',
answers: ['Eucalyptus', 'Alien Armpit', "Screamin' Green", 'Forest Green'],
color : "#84DE02",
correct_answer: 'Alien Armpit'
},
{
index: 2,
question: 'What is the name of this crayon?',
answers: ['Princess Perfume', 'Bubble Bath (Tickle Me Pink)', 'Carmine', 'Wild Strawberry'],
color : "#FF85CF",
correct_answer: 'Princess Perfume'
},
{
index: 3,
question: 'What is the name of this crayon?',
answers: ['Jasper', 'Orange', 'Ogre Odor', 'Jelly Bean'],
color : "#FD5240",
correct_answer: 'Ogre Odor'
}
]});
How do I change the color of the buttons?
Under utils/animations.js, I saw the different colors. I saw something about config/settings.js where it list all the animations.
// Listen For Answer Animation - played to all buttons after a question is asked
'LISTEN_FOR_ANSWER_ANIMATION': animations.BasicAnimations.SolidAnimation(1, COLORS.QUESTION_COLOR, 26000),
I traced it back where it's being used and found that under utils/game.js, under listenForAnswer
// everyone gets the same animations
ctx.directives.push(directives.GadgetController.setIdleAnimation({
'targetGadgets': gadgetIds,
'animations': settings.ANIMATIONS.LISTEN_FOR_ANSWER_ANIMATION }));
so I changed it to pass the color based from trivia question.
ctx.directives.push(directives.GadgetController.setIdleAnimation({
'targetGadgets': gadgetIds,
'animations': animations.BasicAnimations.SolidAnimation(1, triviaQuestion.color, 26000)
}));
How do I pass the trivia question to listenForAnswer?
listenForAnswer: function (handlerInput, triviaQuestion) {
.....
}
Then modify
Game.listenForAnswer(handlerInput, triviaQuestion);
So when it asks the question, and started it listening for the answer, It will change the color of the buttons to the crayon color.
case 'answer_interstitial_event': {
let questions = ctx.t('QUESTIONS');
let currentQuestion = parseInt(sessionAttributes.currentQuestion || 1, 10);
let shuffledQuestionIndex = sessionAttributes.orderedQuestions[currentQuestion - 1];
let triviaQuestion = questions.find(q => q.index == shuffledQuestionIndex);
let responseMessage = ctx.t('ASK_QUESTION_DISPLAY', {
question_number: currentQuestion });
responseMessage.displayText = triviaQuestion.question;
ctx.render(handlerInput, responseMessage);
Game.listenForAnswer(handlerInput, triviaQuestion);
return;
}
I also changed the model (en-US.json) to add the possible answers
"types": [
{"name": "answers","values": [
{ "name": { "value": "Black" } },
{ "name": { "value": "Midnight Blue" } }
}]
That's it. Re-upload my changes and start testing. The instructions are well-written.
https://github.com/alexa/skill-sample-nodejs-buttons-trivia/tree/master/instructions
Lessons Learned:I know color is very tricky. Especially lighting and environment. The color that's on the button is not exact, sometimes it's harder to determine and identify. Just like monitors, the device needs to be calibrated to have the correct shade. Since the buttons doesn't have any calibration, some buttons maybe different from each other. Nonetheless, it's fun guess colors.
If this project made you interested in crayons, crayola names. Or even got inspired building Alexa skills, changing colors of Echo buttons, click the thumbs up button and follow me.
Comments