Skip to content

Instantly share code, notes, and snippets.

@dnlsyfq

dnlsyfq/index.html

Created August 5, 2021 15:05
Show Gist options
  • Save dnlsyfq/8042cdb75b1896cd6256b9efb6e576c1 to your computer and use it in GitHub Desktop.
Save dnlsyfq/8042cdb75b1896cd6256b9efb6e576c1 to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript Objects // source https://jsbin.com/hikopok
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Objects</title>
<link href="css/style.css" rel="stylesheet">
<style id="jsbin-css">
* {
box-sizing: border-box;
}
html,
body {
min-height: 100%;
padding: 0;
margin: 0;
}
body {
color: #fff;
font-size: 1em;
font-family: "Gotham Rounded A", "Gotham Rounded B", "Gotham Rounded", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-image: linear-gradient(15deg, #97dff4 0%, #38a9cb 100%);
}
main {
width: 60%;
max-width: 1080px;
padding: 40px 0;
margin: 0 auto;
}
h1 {
font-size: 3.75em;
text-align: center;
margin: 0.35em 0 0.5em;
text-shadow: 0 2px 0 rgba(0,0,0, 0.1);
}
h2 {
font-size: 2.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="js/for-in.js"></script>
<script id="jsbin-javascript">
// 1. Create an array to hold quiz questions and answers
/*
const questions = [
['How many planets are in the Solar System?', '8'],
['How many continents are there?', '7'],
['How many legs does an insect have?', '6'],
['What year was JavaScript created?', '1995']
];
*/
const questions = [
{
question:'How many planets are in the Solar System?',
answer:'8'
},
{
question:'How many continents are there?',
answer:'7'
},
{
question:'How many legs does an insect have?',
answer:'6'
},
{
question:'What year was JavaScript created?',
answer:'1995'
}
]
// 2. Store the number of questions answered correctly
const correct = [];
const incorrect = [];
let correctAnswers = 0;
/*
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 < questions.length; i++ ) {
// array
// let question = questions[i][0];
// let answer = questions[i][1];
let question = questions[i].question;
let answer = questions[i].answer;
let response = prompt(question);
if ( response === answer ) {
correctAnswers++;
correct.push(question);
} else {
incorrect.push(question);
}
}
function createListItems(arr) {
let items = '';
for (let i = 0; i < arr.length; i++) {
items += `<li>${arr[i]}</li>`;
}
return items;
}
// 4. Display the number of correct answers to the user
let html = `
<h1>You got ${correctAnswers} question(s) correct</h1>
<h2>You got these questions right:</h2>
<ol>${ createListItems(correct) }</ol>
<h2>You got these questions wrong:</h2>
<ol>${ createListItems(incorrect) }</ol>
`;
document.querySelector('main').innerHTML = html;
</script>
<script id="jsbin-source-css" type="text/css">* {
box-sizing: border-box;
}
html,
body {
min-height: 100%;
padding: 0;
margin: 0;
}
body {
color: #fff;
font-size: 1em;
font-family: "Gotham Rounded A", "Gotham Rounded B", "Gotham Rounded", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-image: linear-gradient(15deg, #97dff4 0%, #38a9cb 100%);
}
main {
width: 60%;
max-width: 1080px;
padding: 40px 0;
margin: 0 auto;
}
h1 {
font-size: 3.75em;
text-align: center;
margin: 0.35em 0 0.5em;
text-shadow: 0 2px 0 rgba(0,0,0, 0.1);
}
h2 {
font-size: 2.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 an array to hold quiz questions and answers
/*
const questions = [
['How many planets are in the Solar System?', '8'],
['How many continents are there?', '7'],
['How many legs does an insect have?', '6'],
['What year was JavaScript created?', '1995']
];
*/
const questions = [
{
question:'How many planets are in the Solar System?',
answer:'8'
},
{
question:'How many continents are there?',
answer:'7'
},
{
question:'How many legs does an insect have?',
answer:'6'
},
{
question:'What year was JavaScript created?',
answer:'1995'
}
]
// 2. Store the number of questions answered correctly
const correct = [];
const incorrect = [];
let correctAnswers = 0;
/*
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 < questions.length; i++ ) {
// array
// let question = questions[i][0];
// let answer = questions[i][1];
let question = questions[i].question;
let answer = questions[i].answer;
let response = prompt(question);
if ( response === answer ) {
correctAnswers++;
correct.push(question);
} else {
incorrect.push(question);
}
}
function createListItems(arr) {
let items = '';
for (let i = 0; i < arr.length; i++) {
items += `<li>${arr[i]}</li>`;
}
return items;
}
// 4. Display the number of correct answers to the user
let html = `
<h1>You got ${correctAnswers} question(s) correct</h1>
<h2>You got these questions right:</h2>
<ol>${ createListItems(correct) }</ol>
<h2>You got these questions wrong:</h2>
<ol>${ createListItems(incorrect) }</ol>
`;
document.querySelector('main').innerHTML = html;</script></body>
</html>
Raw
jsbin.hikopok.css
* {
box-sizing: border-box;
}
html,
body {
min-height: 100%;
padding: 0;
margin: 0;
}
body {
color: #fff;
font-size: 1em;
font-family: "Gotham Rounded A", "Gotham Rounded B", "Gotham Rounded", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-image: linear-gradient(15deg, #97dff4 0%, #38a9cb 100%);
}
main {
width: 60%;
max-width: 1080px;
padding: 40px 0;
margin: 0 auto;
}
h1 {
font-size: 3.75em;
text-align: center;
margin: 0.35em 0 0.5em;
text-shadow: 0 2px 0 rgba(0,0,0, 0.1);
}
h2 {
font-size: 2.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);
}
Raw
jsbin.hikopok.js
// 1. Create an array to hold quiz questions and answers
/*
const questions = [
['How many planets are in the Solar System?', '8'],
['How many continents are there?', '7'],
['How many legs does an insect have?', '6'],
['What year was JavaScript created?', '1995']
];
*/
const questions = [
{
question:'How many planets are in the Solar System?',
answer:'8'
},
{
question:'How many continents are there?',
answer:'7'
},
{
question:'How many legs does an insect have?',
answer:'6'
},
{
question:'What year was JavaScript created?',
answer:'1995'
}
]
// 2. Store the number of questions answered correctly
const correct = [];
const incorrect = [];
let correctAnswers = 0;
/*
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 < questions.length; i++ ) {
// array
// let question = questions[i][0];
// let answer = questions[i][1];
let question = questions[i].question;
let answer = questions[i].answer;
let response = prompt(question);
if ( response === answer ) {
correctAnswers++;
correct.push(question);
} else {
incorrect.push(question);
}
}
function createListItems(arr) {
let items = '';
for (let i = 0; i < arr.length; i++) {
items += `<li>${arr[i]}</li>`;
}
return items;
}
// 4. Display the number of correct answers to the user
let html = `
<h1>You got ${correctAnswers} question(s) correct</h1>
<h2>You got these questions right:</h2>
<ol>${ createListItems(correct) }</ol>
<h2>You got these questions wrong:</h2>
<ol>${ createListItems(incorrect) }</ol>
`;
document.querySelector('main').innerHTML = html;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment