Spaces:
Running
title: SamsTopTenQuiz
emoji: 🚀
colorFrom: green
colorTo: red
sdk: static
pinned: false
Game Creation Process:
- Open Browser to an AI with Canvas - A capability to interactively test the AI output as HTML/JS app and game.
- In second window edit a README.md markdown file for your app. This will contain this as specification and method steps process as markdown outline.
- In third window perform UI/UX testing and playtesting. Make sure to gather output image examples to test. Gather scoring and playability feedback from your angel test users.
- Fourth - assume positive intent and always bring examples back to language and feel free to jump in, edit and change to meet your needs. For Game logic in code try to be general about solutions that would seem human friendly since this is for fun and relationships so emphasis is on making it as fun and accurate as possible for user enjoyment and superpowers.
Answer Key:
Steps In Creation Process in Method Steps Markdown Outline:
Initial Prompt: Game Card as html js app with markdown outline and emojis. 1. Name Sam's all time favorite musical group? Hint - Their debut album was released in 1986. 2. What is Sam's favorite game? 3. In her 20's, Sam lived briefly in which two states? 4. Name Sam's longest Employer - Hint close to twenty years. 5. Sam holds a BA degree in _____ , and Masters degree in _____? 6. What is Sam's biggest fear? 7. Name the first National Park that Sam and Aaron travelled to - Hint it was during COVID. 8. Sam and her BFF have matching tattoos which is the title of a song. What is the Paul McCartney song? 9. What animal would Sam like to have as an indoor pet? 10. If Sam won $1000 shopping spree at the store of her choice, which store would it be? Bonus point - if you can name why. Create this as a game card which user can play with HTMl and JS as a canvas to test it.
refactor to have whole game cards show each question and be pre-print ready.. Add emojis!
Remove all hints you added.
Remove emojis
For the two part questions in this, fix it so they have two blanks like is done for 10.
Here is a version of the key. Can you make it so the app has scoring? Two point questions can have multiple answers which is shown in the answer key. For example, 4 if you enter MSU or Metropolitan State University either work to score 1 point. For two parts 5. the answers should match key. Make it so too if you get two words right out of three you get the point too. We want to create a bonus game which calculates your final score. also Reveal Answers would keep the users answers (maybe via cookie or some state tracking? We are going to use their score to do a plinko game after user clicks Check My Answers. The image here represents all answers correct. 10 needs to be per my key so update code for that one since Answer is Menards and Rebate. For now show the total score. Score is +1 for each answer matched against key and support or within key to store two possible answers like MSU or Metropolitan State University so would be 1 point in either case if user entered MSU or Metropolitan State University. Lets also show a checkmark emoji and turn square green and show score beside the answer like +1 so user can easily see which were right and which were wrong. With the Plinko Tokans or coins, use a Gold Coin Emoji and feature a button with total score. For 14.2 (second answer that says bonus that is only two point answer), all others are +1 and there are thirteen total inputs.
Give it an image example:
If user gets part of the question with part of the answer accept it as correct answer. Example is for Death Valley we would accept Death Valley National Park or just Death Valley - Why? National Park two word combo is in the question. Identify when user uses words in question and count them as +1 correct if they match.
Retest and show windows for a 1.2.3. step Playing the Game in Image snapshots. This should match intended use and contain all edge test conditions as an image.
10.1. :
10.2. :
10.3. :
Annotate what was missing in language. Refine your ask and use a corrected example if necessary. Brevity is your friend so be clear in short requests.
For example Scoring was not completed and it probably needs direction on where to go with it for implentation in specification.
Specify you want the Show Answers to do the scoring and update the answers showing comparison between user answer and the key.
Add a Name at the top like a Homework Assignment - clearly do the UI up near title line.
Also add state management so user can refresh or come to page from different device and their state is recalled.
If they come clean from another device and havent set Name yet, have it save and recall with new buttons to support saving results by name.
use Aaron as test name. Have Reveal Answers change to Check Answers with Key if user has a value for entry. Do this dynamically with the UI.
For Check Answers with key add correct / incorrect emoji per text entry.
Assume some users are on phone so you might want to make it easy for users to save or print their answers or share to summarize players and scores.
Include the Score at end and create a new UI for that to reward user based on percent and showing percent correct with 14 possible points = 100%!
As you test it the Preview mode of Canvas or runtime AI's will include: Gemini, Claude, and Grok for HTML/JS which is great. Claude also supports SVG for vector intelligence or ability to do great pre-print ready playable animation even geometry.
Good Luck and Have Fun! More to come with Plinko Game next with Score Tokens as Input to output plinko score and animated game playable after the game card score.
Record your final image of it when its completed. This should be the ideal output you have reached today easy to share as copy at a moments notice.
