Note that there are some explanatory texts on larger screens.

plurals
  1. POString of images: Magic 8 Ball Simulation
    primarykey
    data
    text
    <p>I need to create w magic eight ball simulation where the user can ask specific questions, and for the same question, it will always return the same answer. Like, when the user enters Will I be rich?, I want the image to read no from ../Images/eightBallNo.png That image needs to appear. Currently, the code I have does not show an error in the Chrome console, but it's not working. Is there something I'm doing wrong?</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;Project 4: Consistent&lt;/title&gt; &lt;!-- This part is the function to create my magic eight ball that will randomly give a result, but for certain questions, it will provide the same annswer always to fool their minds. --&gt; &lt;style&gt; #answerImages { bachground-color: white; height: 100 px; width: 300 px; text-align: center; padding: 60 px; margin: 30 px; corner-radius: 10 px; } &lt;/style&gt; &lt;script&gt; // empty cache to use var answerMap = {} // array of your images var images = ['eightBallYes.png', 'eightBallNo.png', 'eightBallMillionYears.png', 'eightBallAskLater.png', 'eightBallReally.png']; function eightBall() { var answer = document.getElementById("answerBox").value; answer = answer.toLowerCase(); if (answer.search(/[r]/) &gt; -1 ) { var yes = '../Images/eightBallYes.png' return yes; } if (answer.search(/[m]/) &gt; -1 ) { var no = '../Images/eightBallNo.png' return no; } else { var randomIndex = Math.floor(Math.random() * images.length); imageToUse = images[randomIndex]; answerMap[answer] = imageToUse; } } window.onload = alert('Welcome to my Project 4') &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;body style="background:#EEEE17"&gt; &lt;!-- This part of the page will simulate a magic eight ball that will provide at least 4 answers. When certain questions are asked, it will return the same answers. This is honestly a pretty cool project to work on. --&gt; &lt;div style="text-align:center"&gt; &lt;h1&gt;Project 4: Booyah!&lt;/h1&gt; &lt;img src="../images/eightBallTemplate.png" &gt; &lt;h2&gt;Magic 8-Ball Game&lt;/h2&gt; &lt;!-- The following code was borrowed from http://www.w3schools.com/html_forms.asp --&gt; &lt;input type="text" id="answerBox" value="Please ask a question"&gt; &lt;input type="button" value="Submit for Magical Results" onclick='eightBall()'/&gt; &lt;!-- Choose Random Answer --&gt; &lt;!--Display my Answer --&gt; &lt;div id="myOutput"&gt;&lt;/div&gt; &lt;hr&gt; &lt;a href="http://pages.uoregon.edu/alans/111/CIS%20111/p4/mac.html"&gt;Old MacDonald In-Class Activity&lt;/a&gt; &lt;br&gt; &lt;a href="http://pages.uoregon.edu/alans/111/CIS%20111/p4/paramString.html"&gt;Parameter In-Class Activity&lt;/a&gt; &lt;br&gt; &lt;a href="http://pages.uoregon.edu/alans/111/CIS%20111/p4/isPrimeLight-jQuery.html"&gt;jQuery In-Class Activity&lt;/a&gt; &lt;footer&gt; &lt;p&gt; &amp;copy; Copyright by Alan Sylvestre &lt;/p&gt; &lt;/footer&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload