Created
August 5, 2021 09:07
-
-
Save dnlsyfq/2ced17fc3b32d04eb286bcb923b42d21 to your computer and use it in GitHub Desktop.
JavaScript Arrays // source https://jsbin.com/yejabub
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JavaScript Arrays</title> | |
| <link href="style.css" rel="stylesheet"> | |
| <style id="jsbin-css"> | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| color: #fff; | |
| font-size: 1em; | |
| font-family: "Gotham Rounded A", "Gotham Rounded B", "Gotham Rounded", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| background-color: #42b4d6; | |
| } | |
| main { | |
| width: 60%; | |
| max-width: 1080px; | |
| padding: 1em 0 2em; | |
| margin: 0 auto; | |
| } | |
| h1 { | |
| font-size: 3.75em; | |
| margin-bottom: 0.5em; | |
| text-shadow: 0 2px 0 rgba(0,0,0, 0.1); | |
| } | |
| h2 { | |
| font-size: 2.5em; | |
| margin-top: 1.5em; | |
| font-weight: normal; | |
| } | |
| main p { | |
| font-size: 1.9em; | |
| margin: 0; | |
| line-height: 1.5; | |
| text-align: center; | |
| } | |
| ul, | |
| ol { | |
| list-style-position: inside; | |
| font-size: 1.5em; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| li { | |
| line-height: 1.25; | |
| margin: 0 0 1.1em; | |
| color: #42b4d6; | |
| padding: 0.8em; | |
| background-color: white; | |
| border-radius: 3px; | |
| box-shadow: 0 2px 0 rgba(0,0,0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main></main> | |
| <script src="script.js"></script> | |
| <script id="jsbin-javascript"> | |
| // 1. Create a multidimensional array to hold quiz questions and answers | |
| const data = [ | |
| ['How many planets are in the Solar System',8], | |
| ['How many continents are there?',7], | |
| ['What year was Javascript created?',1995] | |
| ] | |
| // 2. Store the number of questions answered correctly | |
| let correct = 0; | |
| let question ; | |
| let html = ``; | |
| let childCorrect = ``; | |
| let childFalse = ``; | |
| /* | |
| 3. Use a loop to cycle through each question | |
| - Present each question to the user | |
| - Compare the user's response to answer in the array | |
| - If the response matches the answer, the number of correctly | |
| answered questions increments by 1 | |
| */ | |
| for(let i=0; i < data.length; i++){ | |
| question = prompt(data[i][0]); | |
| if(+question === data[i][1]){ | |
| correct += 1; | |
| childCorrect += `<li> ${ data[i][0] } </li>`; | |
| } else { | |
| childFalse += `<li> ${ data[i][0] } </li>`; | |
| } | |
| } | |
| html += `You got ${correct} question(s) correct `; | |
| // 4. Display the number of correct answers to the user | |
| document.querySelector("main").innerHTML = `<h1> ${html} </h1> <br><br> <h2>You got these questions right:</h2>` + `<ol>${childCorrect}</ol>` + | |
| `<br><br> <h2>You got these questions wrong:</h2>` + `<ol>${childFalse}</ol>`; | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">* { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| color: #fff; | |
| font-size: 1em; | |
| font-family: "Gotham Rounded A", "Gotham Rounded B", "Gotham Rounded", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| background-color: #42b4d6; | |
| } | |
| main { | |
| width: 60%; | |
| max-width: 1080px; | |
| padding: 1em 0 2em; | |
| margin: 0 auto; | |
| } | |
| h1 { | |
| font-size: 3.75em; | |
| margin-bottom: 0.5em; | |
| text-shadow: 0 2px 0 rgba(0,0,0, 0.1); | |
| } | |
| h2 { | |
| font-size: 2.5em; | |
| margin-top: 1.5em; | |
| font-weight: normal; | |
| } | |
| main p { | |
| font-size: 1.9em; | |
| margin: 0; | |
| line-height: 1.5; | |
| text-align: center; | |
| } | |
| ul, | |
| ol { | |
| list-style-position: inside; | |
| font-size: 1.5em; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| li { | |
| line-height: 1.25; | |
| margin: 0 0 1.1em; | |
| color: #42b4d6; | |
| padding: 0.8em; | |
| background-color: white; | |
| border-radius: 3px; | |
| box-shadow: 0 2px 0 rgba(0,0,0, 0.1); | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">// 1. Create a multidimensional array to hold quiz questions and answers | |
| const data = [ | |
| ['How many planets are in the Solar System',8], | |
| ['How many continents are there?',7], | |
| ['What year was Javascript created?',1995] | |
| ] | |
| // 2. Store the number of questions answered correctly | |
| let correct = 0; | |
| let question ; | |
| let html = ``; | |
| let childCorrect = ``; | |
| let childFalse = ``; | |
| /* | |
| 3. Use a loop to cycle through each question | |
| - Present each question to the user | |
| - Compare the user's response to answer in the array | |
| - If the response matches the answer, the number of correctly | |
| answered questions increments by 1 | |
| */ | |
| for(let i=0; i < data.length; i++){ | |
| question = prompt(data[i][0]); | |
| if(+question === data[i][1]){ | |
| correct += 1; | |
| childCorrect += `<li> ${ data[i][0] } </li>`; | |
| } else { | |
| childFalse += `<li> ${ data[i][0] } </li>`; | |
| } | |
| } | |
| html += `You got ${correct} question(s) correct `; | |
| // 4. Display the number of correct answers to the user | |
| document.querySelector("main").innerHTML = `<h1> ${html} </h1> <br><br> <h2>You got these questions right:</h2>` + `<ol>${childCorrect}</ol>` + | |
| `<br><br> <h2>You got these questions wrong:</h2>` + `<ol>${childFalse}</ol>`; | |
| </script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| color: #fff; | |
| font-size: 1em; | |
| font-family: "Gotham Rounded A", "Gotham Rounded B", "Gotham Rounded", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| background-color: #42b4d6; | |
| } | |
| main { | |
| width: 60%; | |
| max-width: 1080px; | |
| padding: 1em 0 2em; | |
| margin: 0 auto; | |
| } | |
| h1 { | |
| font-size: 3.75em; | |
| margin-bottom: 0.5em; | |
| text-shadow: 0 2px 0 rgba(0,0,0, 0.1); | |
| } | |
| h2 { | |
| font-size: 2.5em; | |
| margin-top: 1.5em; | |
| font-weight: normal; | |
| } | |
| main p { | |
| font-size: 1.9em; | |
| margin: 0; | |
| line-height: 1.5; | |
| text-align: center; | |
| } | |
| ul, | |
| ol { | |
| list-style-position: inside; | |
| font-size: 1.5em; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| li { | |
| line-height: 1.25; | |
| margin: 0 0 1.1em; | |
| color: #42b4d6; | |
| padding: 0.8em; | |
| background-color: white; | |
| border-radius: 3px; | |
| box-shadow: 0 2px 0 rgba(0,0,0, 0.1); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 1. Create a multidimensional array to hold quiz questions and answers | |
| const data = [ | |
| ['How many planets are in the Solar System',8], | |
| ['How many continents are there?',7], | |
| ['What year was Javascript created?',1995] | |
| ] | |
| // 2. Store the number of questions answered correctly | |
| let correct = 0; | |
| let question ; | |
| let html = ``; | |
| let childCorrect = ``; | |
| let childFalse = ``; | |
| /* | |
| 3. Use a loop to cycle through each question | |
| - Present each question to the user | |
| - Compare the user's response to answer in the array | |
| - If the response matches the answer, the number of correctly | |
| answered questions increments by 1 | |
| */ | |
| for(let i=0; i < data.length; i++){ | |
| question = prompt(data[i][0]); | |
| if(+question === data[i][1]){ | |
| correct += 1; | |
| childCorrect += `<li> ${ data[i][0] } </li>`; | |
| } else { | |
| childFalse += `<li> ${ data[i][0] } </li>`; | |
| } | |
| } | |
| html += `You got ${correct} question(s) correct `; | |
| // 4. Display the number of correct answers to the user | |
| document.querySelector("main").innerHTML = `<h1> ${html} </h1> <br><br> <h2>You got these questions right:</h2>` + `<ol>${childCorrect}</ol>` + | |
| `<br><br> <h2>You got these questions wrong:</h2>` + `<ol>${childFalse}</ol>`; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment