TheShadowGamer

April 16, 2017

Okay so now I'm having issues making it so the buttons actually go somewhere. Where do I apply the link to the buttons so it doesn't

A. Create a button above my word as in this version.

B. put the href somewhere that it doesn't screw up my divs and form?

Also if I do this localStorage.setItem("gatorScore",gator); how do I actually store the value of var gator? Just add another comma?

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Find Out Your Spirit Animal</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="quiz.css">
 
</head>
	<body>
        <div id= "myQuiz">
            <h1>Spirit Animal Quiz</h1>
            <div class = "progress">
            <div class="on"></div>
            <div></div>
            <div></div>   
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            </div>

<h1>Spirit Animal Quiz</h1>

<section class="main">

<form name="quiz" action="javascript:check();" class="quizform">

<div class="question">

	<h2>Question #1</h2>
    <h3>How would you describe your skin?</h3>
	<a href = "https://www.bing.com/">
	<div class="answer">
		<input name="q1" id="value1"/> Rough
	</div>
    </a>

	<div class="answer">
		<input name="q1" value="value2" id="value2" type="radio" /> Smooth
	</div>

	<div class="answer">
		<input name="q1" value="value3" id="value3" type="radio" /> Both
	</div>
</div>
</form>

</section>

<script type="text/javascript">

   var result;
   
   function check()

   {

      var question;
      var value1;
      var value2;
      var value3;
      var gator = 0;
      var wolf = 0;
      var deer = 0;
      var rabbit = 0;
      
      question = 1;
      value1 = 0;
      value2 = 0;
      value3 = 0;
      
      result = "";

      var choice;
      
      
         var q = document.forms['quiz'].elements['q'+question];


            if (choice == "value1") {
               gator == (gator +1) && wolf == (wolf +1);
            }

            else if (choice == "value2") {
                deer == (deer +1) && rabbit == (rabbit +1);
            }

            else if (choice == "value3") {
               gator == (gator +1) && wolf == (wolf +1) && deer == (deer +1) && rabbit == (rabbit +1);
            }
            else (gator == 0) && (wolf == 0) && (deer == 0) && (rabbit == 0);
          
   }
</script>
        </div>
</body>
</html>

CSS

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:900|Roboto:400,100);
body { background-color: black; padding: 20px; }

#myQuiz {
   font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400;
    width: 650px; 650px;
    position: relative
        overflow: hidden;
    color:white;
        background: black;
    
}
#myQuiz h1{
    font-weight: 100; font-size 2em; margin: 0px;
    position: absolute; top:25px; left:36px;
}
myQuiz h1 span {
    display: block; font-weight: 900; font-family: 'Titillium Web', sans-serif;
    font-size: 3.2 em; line-height: 65px;
}

#myQuiz h2 {font-size: 3em; margin: 0px; font-weight:100;}
#myQuiz h3 {font-size: 2em; margin: 0px; font-weight:100;}
#myQuiz p {margin: 0px 0px 14px 0px;}
#myQuiz .btn {
    display: inline-block;
    cursor: pointer;
    background-color: #7E3517;
    /*TEXT*/
        color: white; text-decoration: none; 
        padding: 5px 15px; border-radius: 6px;
}
#myQuiz .btn:hover {
    background-color: white;
    /*TEXT*/
        color: black; text-decoration: none; 
        padding: 5px 15px; border-radius: 6px;
}
#myQuiz .btn:active {
    background-color: red;
    /*TEXT*/
        color: black; text-decoration: none; 
        padding: 5px 15px; border-radius: 6px;
}
/*PROGRESS BAR*/
#myQuiz .progress{width: 550px; position: absolute; top: 160px; left: 40px;}
#myQuiz .progress div{
    position:relative; display: inline-block; width: 30px; height:30px; margin-right: 30px;
    border-radius: 50%; background-color: rgba(255,255,255,0.2); transition: background-color 1s;
}

#myQuiz .progress div.on,
#myQuiz .progress div.answered {background-color:#ef0101;}

/*INTRO*/
#myQuiz .intro{position: absolute; top: 225px; left:50px; width:550px;}
#myQuiz .intro p {margin: 0px 0px 40px 0px;}

/*QUIZ*/
#myQuiz .question {width: 550px; position: absolute; top: 225px; left: 50px;}
#myQuiz .question .text{font-size: 1.6em; margin: 0px, 0px, 20px, 0px;}
#myQuiz .question .answer {
    display:inline-block; font-size: 1.1em; width:225px; border: 2px solid red;
    border-radius: 6px; padding 10px; margin: 0px 15px 15px 0px;
}


#myQuiz .question .answered.selected {border-color: blue;}

#myQuiz .question.unanswered .ans{cursor: pointer;}
#myQuiz .question.unanswered .ans:hover {background-color: rgba(163,111,155,.2);}
#myQuiz .question.answered .ans{cursor: default;}

/* DONE*/
#myQuiz .done { color:yellow; margin-top: 500px; transition: opacity 1.5s, margin-top 1.5s;}
#myQuiz .done .btn{margin-top: 5px;}

myQuiz .answered . done {visibility: visible; opacity: 1; margin-top: 10px;}

/*RESULTS*/

#myQuiz .results {position: absolute; top: 225px; left: 660px; width: 550px;}

April 15, 2017

On 4/13/2017 at 7:25 PM, davej said:

So then again I will tell you to go look at...

https://www.w3schools.com/html/html5_webstorage.asp

If this is a "beginner level" class then the instructor is being silly and unrealistic.

To be honest I can tell that he enjoys making us suffer, and my friends in the class agree with me. Before spring break he put 4 assignments due in one week, we only had 2 weeks to do them, one of which was a project that I basically spent most of those 2 weeks working on, while also having to work on a 3D model due the same week, and after we got back and he saw that half the class had dropped out he essentially said he purposely did that just to weed out the people without the willpower to do the work.

April 15, 2017

Okay I'm currently working on setting up my "check" function in this to save the values but the issue I can't seem to fix at the moment is that I'm getting the error "Unexpected token else" on line 88* and I can't seem to find the problem. Maybe someone else can spot what I'm missing.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Find Out Your Spirit Animal</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="quiz.css">
 
</head>
	<body>
        <div id= "myQuiz">
            <h1>Spirit Animal Quiz</h1>
            <div class = "progress">
            <div class="on"></div>
            <div></div>
            <div></div>   
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            </div>

<h1>Spirit Animal Quiz</h1>

<section class="main">

<form name="quiz" action="javascript:check();" class="quizform">

<div class="question">

	<h2>Question #1</h2>
    <h3>How would you describe your skin?</h3>
	
	<div class="answer">
		<input name="q1" value="value1" id="value1" type="radio" /> Rough
	</div>

	<div class="answer">
		<input name="q1" value="value2" id="value2" type="radio" /> Smooth
	</div>

	<div class="answer">
		<input name="q1" value="value3" id="value3" type="radio" /> Both
	</div>
</div>
<div class = "done">
<input value="Submit" type="submit" href="http://google.com"/>
</div>
</form>

</section>

<script type="text/javascript">

   var result;
   
   function check()

   {

      var question;
      var value1;
      var value2;
      var value3;
      var gator = 0;
      var wolf = 0;
      var deer = 0;
      var rabbit = 0;
      
      question = 1;
      value1 = 0;
      value2 = 0;
      value3 = 0;
      
      result = "";

      var choice;
      
      do {
      
         var q = document.forms['quiz'].elements['q'+question];


            if (choice == "value1") {
               gator == (gator +1) && wolf == (wolf +1);
            }

            if else (choice == "value2") {
                deer == (deer +1) && rabbit == (rabbit +1);
            }

            if else (choice == "value3") {
               gator == (gator +1) && wolf == (wolf +1) && deer == (deer +1) && rabbit == (rabbit +1);
            }
          
         }while ((deer = "0") || (rabbit = "0") || (gator = "0") || wolf == (wolf = "0"));

</script>
        </div>
</body>
</html>

Here is the updated CSS (not all currently applied since I basically restarted the HTML/JaveScript)

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:900|Roboto:400,100);
body { background-color: black; padding: 20px; }

#myQuiz {
   font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400;
    width: 650px; 650px;
    position: relative
        overflow: hidden;
    color:white;
        background: black;
    
}
#myQuiz h1{
    font-weight: 100; font-size 2em; margin: 0px;
    position: absolute; top:25px; left:36px;
}
myQuiz h1 span {
    display: block; font-weight: 900; font-family: 'Titillium Web', sans-serif;
    font-size: 3.2 em; line-height: 65px;
}

#myQuiz h2 {font-size: 3em; margin: 0px; font-weight:100;}
#myQuiz h3 {font-size: 2em; margin: 0px; font-weight:100;}
#myQuiz p {margin: 0px 0px 14px 0px;}
#myQuiz .btn {
    display: inline-block;
    cursor: pointer;
    background-color: #7E3517;
    /*TEXT*/
        color: white; text-decoration: none; 
        padding: 5px 15px; border-radius: 6px;
}
#myQuiz .btn:hover {
    background-color: white;
    /*TEXT*/
        color: black; text-decoration: none; 
        padding: 5px 15px; border-radius: 6px;
}
#myQuiz .btn:active {
    background-color: red;
    /*TEXT*/
        color: black; text-decoration: none; 
        padding: 5px 15px; border-radius: 6px;
}
/*PROGRESS BAR*/
#myQuiz .progress{width: 550px; position: absolute; top: 160px; left: 40px;}
#myQuiz .progress div{
    position:relative; display: inline-block; width: 30px; height:30px; margin-right: 30px;
    border-radius: 50%; background-color: rgba(255,255,255,0.2); transition: background-color 1s;
}

#myQuiz .progress div.on,
#myQuiz .progress div.answered {background-color:#ef0101;}

/*INTRO*/
#myQuiz .intro{position: absolute; top: 225px; left:50px; width:550px;}
#myQuiz .intro p {margin: 0px 0px 40px 0px;}

/*QUIZ*/
#myQuiz .question {width: 550px; position: absolute; top: 225px; left: 50px;}
#myQuiz .question .text{font-size: 1.6em; margin: 0px, 0px, 20px, 0px;}
#myQuiz .question .ans {
    display:inline-block; font-size: 1.1em; width:225px; border: 2px solid red;
    border-radius: 6px; padding 10px; margin: 0px 15px 15px 0px;
}
#myQuiz .question .ans.selected {border-color: blue;}

#myQuiz .question.unanswered .ans{cursor: pointer;}
#myQuiz .question.unanswered .ans:hover {background-color: rgba(163,111,155,.2);}
#myQuiz .question.answered .ans{cursor: default;}

/* DONE*/
#myQuiz .done { color:yellow; margin-top: 500px; transition: opacity 1.5s, margin-top 1.5s;}
#myQuiz .done .btn{margin-top: 5px;}

myQuiz .answered . done {visibility: visible; opacity: 1; margin-top: 10px;}

/*RESULTS*/

#myQuiz .results {position: absolute; top: 225px; left: 660px; width: 550px;}

April 13, 2017

2 minutes ago, davej said:

What are the prerequisites for this class? What languages does he expect you to use?

He wants JavaScript, HTML, CSS and he recommended using JSON that does the following

"

Take in and store user input from at least 5 different questions answered by the user via HTML form elements (2 points)
Use an array of options to correlate user data to a matrix of potential results you've designed (2 points)
Dynamically display appropriate result images and text to the user after completing the questions (2 points)
Format appropriately for use on a mobile, tablet, or desktop screen using media queries (2 points)
Include original content that communicates an idea to the user through an engaging interaction (2 points)

"

The problem for me is this is essentially a beginners level class, but yet he wants this done in the hardest way possible, when I know I could do it fairly easily if it could all be on one page.

April 13, 2017

47 minutes ago, Ingolme said:

This seems to be a homework assignment, I would suggest using the technologies that have been taught to you instead of trying anything new that we might have presented to you here.

I'm guessing that they want you to make a single-page application where the questions are given in an object (like JSON, but not necessarily a JSON string) and you go updating the page HTML generating form elements and reading them using Javascript.

I wish it were that simple but our teacher wants it one question per page and we have to transfer the data page by page and then give the user a personality, or in my case spirit animal based on the answers they provided.

Another issue is he recommended using JSON, but we've never even used it before.

April 13, 2017

Okay, here is what I have so far. First my HTML

<!DOCTYPE HTML>
<html>
	<head>
		<meta content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Find Out Your Spirit Animal</title>
		<link rel="stylesheet" type="text/css" href="quiz.css">
	</head>
	<body>
        <div id= "myQuiz">
            <h1>Spirit Animal Quiz</h1>
            <div class = "progress">
            <div class="on"></div>
            <div></div>
            <div></div>   
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            </div>
            <div class = "question">
                <p class = "text">How would you describe your skin?</p>
                <p class = "btn">Rough</p>
                <p class = "btn">Smooth</p>
                <p class = "btn">Both</p>
            <div class = done>
            <div class="btn">Next</div>
            </div>
        </div>
        </div>

	</body>
</html>

Next my CSS

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:900|Roboto:400,100);
body { background-color: black; padding: 20px; }

#myQuiz {
   font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400;
    width: 650px; 650px;
    position: relative
        overflow: hidden;
    color:white;
        background: black;
    
}
#myQuiz h1{
    font-weight: 100; font-size 2em; margin: 0px;
    position: absolute; top:25px; left:36px;
}
myQuiz h1 span {
    display: block; font-weight: 900; font-family: 'Titillium Web', sans-serif;
    font-size: 3.2 em; line-height: 65px;
}

#myQuiz h2 {font-size: 3em; margin: 0px; font-weight:100;}
#myQuiz h3 {font-size: 2em; margin: 0px; font-weight:100;}
#myQuiz p {margin: 0px 0px 14px 0px;}
#myQuiz .btn {
    display: inline-block;
    cursor: pointer;
    background-color: #7E3517;
    /*TEXT*/
        color: white; text-decoration: none; 
        padding: 5px 15px; border-radius: 6px;
}
#myQuiz .btn:hover {
    background-color: white;
    /*TEXT*/
        color: black; text-decoration: none; 
        padding: 5px 15px; border-radius: 6px;
}
#myQuiz .btn:active {
    background-color: red;
    /*TEXT*/
        color: black; text-decoration: none; 
        padding: 5px 15px; border-radius: 6px;
}
/*PROGRESS BAR*/
#myQuiz .progress{width: 550px; position: absolute; top: 160px; left: 40px;}
#myQuiz .progress div{
    position:relative; display: inline-block; width: 30px; height:30px; margin-right: 30px;
    border-radius: 50%; background-color: rgba(255,255,255,0.2); transition: background-color 1s;
}

#myQuiz .progress div.on,
#myQuiz .progress div.answered {background-color:#ef0101;}

/*INTRO*/
#myQuiz .intro{position: absolute; top: 225px; left:50px; width:550px;}
#myQuiz .intro p {margin: 0px 0px 40px 0px;}

/*QUIZ*/
#myQuiz .question {width: 550px; position: absolute; top: 225px; left: 50px;}
#myQuiz .question .text{font-size: 1.6em; margin: 0px, 0px, 20px, 0px;}
#myQuiz .question .ans {
    display:inline-block; font-size: 1.1em; width:225px; border: 2px solid red;
    border-radius: 6px; padding 10px; margin: 0px 15px 15px 0px;
}
#myQuiz .question .ans.selected {border-color: blue;}

#myQuiz .question.unanswered .ans{cursor: pointer;}
#myQuiz .question.unanswered .ans:hover {background-color: rgba(163,111,155,.2);}
#myQuiz .question.answered .ans{cursor: default;}

/* DONE*/
#myQuiz .done { color:yellow; margin-top: 50px; transition: opacity 1.5s, margin-top 1.5s; visibility: hidden; opacity: 0;}
#myQuiz .done .btn{margin-top: 5px;}

myQuiz .answered . feedback {visibility: visible; opacity: 1; margin-top: 10px;}

/*RESULTS*/

#myQuiz .results {position: absolute; top: 225px; left: 660px; width: 550px;}

I decided that pulling the questions from JSON would be too much of a hassle so I'm just going to have them on each HTML page. Okay so my current issue before I can even start my JavaScript is that I need to make my buttons stay clicked. I can't figure out how to do it. I don't want the radio style button attached to my buttons, and I'm not sure how to keep the buttons I have with that. If someone can tell me what script I need to add to my buttons to add a clicked state that acts like the answer has been selected while I work on adding the JavaScript variables, that would be awesome.

I have the button to submit the answer hidden, and it won't appear until an answer is selected, but because I can't figure out how to make the buttons stay selected, I can't even get it to take the variable.

Working on the JS I'm now under the assumption that to even make the variables work with the questions that I'm going to have to put them in the script as well. Let me know if that's true or not.

April 13, 2017

What I currently have is the questions setup in JSON and then I'm calling them into the HTML. Would that work for recording the values or would I need to put them elsewhere in order to record the values in JSON?

Main reason I don't know if this would work is because the JSON tutorial I found showed doing this with answers already determined, don't know if me putting the questions in JSON would make it impossible to actually take the users answer as the value or not.

April 13, 2017

Okay, my professor told me to use JSON. But now I can't figure out how to make JSON take the users choice from a radio button. I've found how to do it for entered information, but can't figure out how to make it take a buttons input.

Basically how do I make it record the button press in JSON and add the value to the appropriate selection?

I do love how he wants me to use something we haven't used before on a project of all things.

        "question" : "How would you describe your skin?",
        "answer" : [
            {"id" : 0, "text" : "Rough"},
            {"id" : 1, "text" : "Smooth"},
            {"id" : 2, "text" : "Both"}
        ],
        "choice" : ""

I mean I don't think it would be this simple, just leaving it as "". But however I take the value I then need to add a value to it.

April 11, 2017

I'll give it a shot, thanks!

April 11, 2017

So, I'm really stuck. I know how to make a quiz just fine, with radio buttons, go to the next page, etc., but for our project we have to make the quiz go from one page to the next and hold the answers provided, and then at the end we need to output the result by combining the answers. Essentially it's a personality quiz type thing, rather than a scoring one.

My idea is to add 1 each time an answer corresponding to that personality is given, but how to I transfer those values from one page to the next?

March 4, 2017

I also tried creating a separate else if statement if the variable is null at the main menu and I still get an error from it.

March 4, 2017

I got it to work, I feel like an idiot because it was as simple as changing

document.write(res[i]+"-blip ");

to

res[i] = (res[i]+"-blip ");

It took me so long to figure out something so simple. For f**ks sake brain, work with me here!

Okay so I have one last problem. How do I get cancel to work at the main menu without causing an error? I already tried doing || null at the beginning or end. But I need the "Thanks using the..." message and I can't get it to pop of if I don't include "null" in that statement.

<!DOCTYPE html>
<html>
<head>
<title>Project 1 – Michael Fiorello</title>
    <p id="demo"></p>
    <script>
    do {
        //MAIN MENU
    
        var input = prompt("Please enter 1, 2, 3, or exit.");
        {
    //PROGRAM 1-Enter the string to be converted to robot speak
        if (input === "1")
            do {
                var one = prompt ("Please enter a string.");
                    {
                        if (one === "") 
                            { 
                                console.warn("You need to enter something");
                            }
                    }
                     
            } while (one === "")//keep repeating program 1 until something is entered, aka cannot be blank.
                 
    //PROGRAM 2-Convert the string into robot speak
        else if (input === "2")
            {
              if (one == null) {
                                    console.warn ("You need to first enter a String");
                               }
                else 
                    {
                        console.log ("String Converted")
                            var res = one.split(" ");
                                for(i = 0; i<res.length; i++)
                                 if(res[i].length >= 5)
                                            {
                                                res[i] = (res[i]+"-blip ");
                                            }
                                    else
                                            {
                                                res[i] = (res[i]+"-clang ");
                                            }
                      }
                     
             }
        //Program 3 Robot Language version of the string will appear in the console
        else if (input === "3"){
            if (res == null)
                { 
                    console.warn("You need to first convert your String");
                
                }
            else{
                    var output = res.join(" ");
                    alert ("AWESOME!"); 
                    console.log (output);{
                                            var one = null;
                                            var res = null;
                                         }
                }
                                }
                            
            else if (input == null|| input.toLowerCase() == "exit")
                        {
                            alert ("Thanks for using the ROBOT Language Converter!");
                        } 
        else 
            {
                alert ("Nope");
                console.warn("You need to enter something");
            }
        }
        } while(input.toLowerCase() != "exit");
</script>
</head>
</html>

March 4, 2017

working on fixing the indentation, but what I'm trying to do is have it converted in PROGRAM 2: adding -blip to words 5 characters or more and adding clang to less than character words, but then I need to actually call upon the converted versions in PROGRAM 3, so what do I use to permanently change the strings within the array* for when I call on them?

Better looking now? Maybe?

<!DOCTYPE html>
<html>
<head>
<title>Project 1 – Michael Fiorello</title>
    <p id="demo"></p>
    <script>
    do {
        //MAIN MENU
    
        var input = prompt("Please enter 1, 2, 3, or exit.");
        {
    //PROGRAM 1-Enter the string to be converted to robot speak
        if (input === "1")
            do {
                var one = prompt ("Please enter a string.");
                    {
                        if (one === "") 
                            { 
                                console.warn("You need to enter something");
                            }
                    }
                     
            } while (one === "")//keep repeating program 1 until something is entered, aka cannot be blank.
                 
    //PROGRAM 2-Convert the string into robot speak
        else if (input === "2")
            {
              if (one == null) {
                                    console.warn ("You need to first enter a String");
                               }
                else 
                    {
                        console.log ("String Converted")
                            var res = one.split(" ");
                                for(i = 0; i<res.length; i++)
                                 if(res[i].length >= 5)
                                            {
                                        document.write(res[i]+"-blip ");
                                            }
                                    else
                                            {
                                        document.write(res[i]+"-clang ");
                                            }
                      }
                     
             }
        //Program 3 Robot Language version of the string will appear in the console
        else if (input === "3")
            {
                var output = res.join(" ");
                    alert ("AWESOME!"); 
                    console.log (output);
                        }
                            else if (input == null|| input.toLowerCase() == "exit")
                        {
                            alert ("Thanks for using the ROBOT Language Converter!");
                        }
        else 
            {
                alert ("Nope");
                console.warn("You need to enter something");
            }
        }
        } while(input.toLowerCase() != "exit");
</script>
</head>
</html>

March 4, 2017

<!DOCTYPE html>
<html>
<head>
<title>Project 1 – Michael Fiorello</title>
    <p id="demo"></p>
    <script>
    do {
        //MAIN MENU
    
        var input = prompt("Please enter 1, 2, 3, or exit.");
        {
    //PROGRAM 1-Enter the string to be converted to robot speak
        if (input === "1")
        do {
            var one = prompt ("Please enter a string.");{
              if (one === "") { console.warn("You need to enter something");}
                 }
                     
             }while (one === "")//keep repeating program 1 until something is entered, aka cannot be blank.
                 
    //PROGRAM 2-Convert the string into robot speak
        else if (input === "2")
            {
              if (one == null) {console.warn ("You need to first enter a String")}
                else {console.log ("String Converted")
                    var res = one.split(" ");
                        for(i = 0; i<res.length; i++)
                         if(res[i].length >= 5)
                     {
                        document.write(res[i]+"-blip ");
                      }
                      else{
                         document.write(res[i]+"-clang ");
                     }
                 }
                     
                     }
        //Program 3 Robot Language version of the string will appear in the console
        else if (input === "3")
        {var output = res.join(" ");
                alert ("AWESOME!"); 
                console.log (output)
            }
        else if (input == null|| input.toLowerCase() == "exit")
            {
            alert ("Thanks for using the ROBOT Language Converter!");
            }
        else 
            {
                alert ("Nope");
            console.warn("You need to enter something");
            }
        }
        }while(input.toLowerCase() != "exit");
</script>
</head>
</html>

Okay, so I have everything technically working, but I don't want it to "write" out the string to the page, just in the console when called upon in PROGRAM 3. I don't think innerHTML would work for that one, but I'm giving it a shot now.

March 4, 2017

The reason document.write() is not working in your code is because you've capitalized "Document". Javascript is case sensitive, "a" and "A" are two different variables. Your Javascript console should have shown an error indicating that "Document" is undefined.

You're still comparing one to null on this line:
if (one === null) {console.warn ("You need to first enter a String")}
Could you please describe what each symbol means in the following line of your code? If you don't understand what it's doing then you're not writing code properly:
for(i = 0; i<res.one; i++)
Please read about some of the following properties and methods:

element.innerHTML: https://www.w3schools.com/jsref/prop_html_innerhtml.asp

document.getElementById(): https://www.w3schools.com/jsref/met_document_getelementbyid.asp

string.split(): https://www.w3schools.com/jsref/jsref_split.asp

array.join(): https://www.w3schools.com/jsref/jsref_join.asp

Just found the getElementById page a moment ago, was about to update I was going to attempt to implement.

For

for(i = 0; i<res.one; i++)

i = 0 is stating to start with the first array. i++ is adding to the counter. Trying to remember what i<res.one is I think it makes it so it can go on forever as long as var one exists. Only learned it for the first time yesterday. I know that if I did i<10 it would stop after the tenth interval

//Never mind that edit was stupid.

March 4, 2017

So I got program 2 to function, but it's not adding blip and clang to the words as well as keeping them as an array. I also can't figure out where to implement "<p id="trythis"></p>" to actually use "document.getElementBtId('trythis').innerHTML ="whatever"" and definitely need it because document.write seems to do f**k all.

//Removed code for updated version below.

March 3, 2017

So what does the string default to if not arr? I tried one, Array, array, res, and i and still not working.

So what do I use instead of document write? Thats what we were taught in our tutorial videos

Or how do I declare that input as an array once it's split if that's the issue. That's the last thing I can think of.

March 3, 2017

Arr (array) is non existent so no length can never be gathered for the for loop to function, and DON'T USE document.write, anyone who use this, or suggest using this, should have electric prod applied to their gonads or force to listen to one direction.

So what does the string default to if not arr? I tried one, Array, array, res, and i and still not working.

So what do I use instead of document write? Thats what we were taught in our tutorial videos

March 3, 2017

var str = "How are you doing today?";

var res = str.split(" ");

str is the string of words, res is the variable name of array that stores individual words, when .split() is used to split the string of text. To access each word in array you can loop through each word with 'for' loop, as it loops through each word check length with 'if' condition, for example

if(res.length >= 5){

res = res+“-blip”;

}

Any word greater or equal to 5, force the current array item of 'res' with index ref of 'i' (which is variable used in 'for loop' which increment the value on each loop), now equal the current word with joining of text of “-blip”

I think I've got it but I can't figure out how to fix line 24 so that it will actually do it.

<!DOCTYPE html>
<html>
<head>
<title>Project 1 – Michael Fiorello</title>
    <script>
    do{
        //MAIN MENU
    var input = prompt ("Please enter 1, 2, 3, or exit.");{
    //PROGRAM 1-Enter the string to be converted to robot speak
        if(input == "1")
         do{
             var one = prompt ("Please enter a string.");{
              if (one == "") { console.warn("You need to enter something");}
                 }
                     
             }while (one == "")//keep repeating program 1 until something is entered, aka cannot be blank.
                 
    //PROGRAM 2-Convert the string into robot speak
        else if (input == "2")
            {
              if (one == null) {console.warn ("You need to first enter a String")}
                else {console.log ("String Converted")
                    var res = one.split(" ");{
    //Line 24, well technically now the problem is on Line 25          
                        for(i = 0, i<Arr.length, i++)
                         if(res[i].length >= 5)
                      {
                          Document.write(Arr.[i]+"-blip");
                      }
                      else{
                          Document.write(Arr.[i]+"-clang");
                      }
                    }
                     
                     }
                     }
        //Program 3 Robot Language version of the string will appear in the console
        else if (input == "3")
        {
                alert ("AWESOME!"); 
            }
        else if (input.toLowerCase() == "exit")
            {
            alert ("Thanks for using the ROBOT Language Converter!");
            }
        else 
            {
            alert ("Nope");
            console.warn("You need to enter something");
            }
        }
        }while(input.toLowerCase() != "exit");
</script>
</head>
<body>
<h1></h1>

</body>
</html>

March 3, 2017

Every string has a length property. You can loop through the array check the length of the string and append something to it based on the length. Once you're done, you can turn the array back into a string using the join() method.

I think I understand what you mean, but what do I replace this "alert" message with

 alert("'"+res[0]+"'" + " length is: "+res[0].length);

to just record them as an array?

March 3, 2017

Place each individual word into an array using split(). then by using index choose individual words to check length and adjust to your needs. https://www.w3schools.com/jsref/jsref_split.asp

Currently what I can't figure out is how to record them rather than just saying the lengths.

I need to be able to do this

If a word is five or more letters long, add “-blip” to the end of the word

If a word is less than five letters long, add “-clang” to the end of the word.

It's the only part of the program that I'm completely dumbfounded on.

March 2, 2017

Place each individual word into an array using split(). then by using index choose individual words to check length and adjust to your needs. https://www.w3schools.com/jsref/jsref_split.asp

Thank you, that seems like it will work perfectly.

March 2, 2017

So what I want to do is make it so the user enters a string. For example a prompt comes up and the user enters

"I want to do something"

into the text box. Is there a way to make each word into its own variable so that they would become

var I

var want

var to

var do

var something

so that I can then check length and change each individually?

Trying to find a way, but all I can find is checking length of an entered string, but not the ability to check each word individually.

March 2, 2017

I got it to work by removing null and replacing it with ""

March 2, 2017

I know, because you are changing the value of one instead of checking the value. Compare that if statement with your other if statements.

I still have no clue what you mean or how to fix it. I tried changing it to == also.

Sign In

TheShadowGamer

Posts

Joined

Last visited

Content Type

Profiles

Forums

Events

Posts posted by TheShadowGamer

Page by page quiz HELP

Page by page quiz HELP

Page by page quiz HELP

Page by page quiz HELP

Page by page quiz HELP

Page by page quiz HELP

Page by page quiz HELP

Page by page quiz HELP

Page by page quiz HELP

Page by page quiz HELP

Is there any way to do this?

Is there any way to do this?

Is there any way to do this?

Is there any way to do this?

Is there any way to do this?

Is there any way to do this?

Is there any way to do this?

Is there any way to do this?

Is there any way to do this?

Is there any way to do this?

Is there any way to do this?

Is there any way to do this?

Is there any way to do this?

Troubleshooting help

Troubleshooting help

Browse

Activity