From 7ce0602b938ca467ac6556c98182f48b8c5ce907 Mon Sep 17 00:00:00 2001 From: Alissa Troiano Date: Fri, 22 Apr 2022 11:36:57 -0400 Subject: [PATCH 1/6] Add some starter-JS logic for quiz --- assets/css/style.css | 12 +++ assets/js/quiz.js | 76 ++++++++++++++++ assets/js/script.js | 75 ++++++++++++++++ index.html | 24 ++++- mission.html | 6 +- questions.html | 202 ++++++++++++++++++++++--------------------- 6 files changed, 291 insertions(+), 104 deletions(-) create mode 100644 assets/js/quiz.js diff --git a/assets/css/style.css b/assets/css/style.css index 335b11b..a19d20d 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -20,6 +20,8 @@ /* Main */ main { padding: 1rem; + height: auto; + overflow: auto; } .font-dark { @@ -64,6 +66,16 @@ h1, h2, h3, h4, h5, h6 { color: var(--p-blue-1); } /* Landing Page */ + +.jumbotron { + height: 50vh; +} + + +#btn-main-2{ + background-color: #79C1CC; +} + h1.display-4 { margin-top: 30px; font-family: 'Oswald', sans-serif; diff --git a/assets/js/quiz.js b/assets/js/quiz.js new file mode 100644 index 0000000..6d63c35 --- /dev/null +++ b/assets/js/quiz.js @@ -0,0 +1,76 @@ + +const quizContainer = document.getElementById('quiz'); +const resultsContainer = document.getElementById('results'); +const submitButton = document.getElementById('submit'); +const startQuiz = document.getElementById('startQuiz'); + +// This function is called when the user clicks on the start button +function Question(text, choices, answer) { + this.text = text; + this.choices = choices; + this.answer = answer; +} + +function showResults(){} + +// Create an array of questions here +const quizQuestions = [ + { + question: "What type of car do you want?", + answers: { + a: "Compact", + b: "Mid-Size", + c: "SUV" + }, + userAnswer: "" + }, + { + question: "What is your annual mileage?", + answers: { + a: "Less than 10,000", + b: "10,000 - 20,000", + c: "More than 20,000" + }, + userAnswer: "" + }, + { + question: "What is your budget?", + answers: { + a: "Less than $30,000", + b: "$30,000 - $50,000", + c: "$More than $50,000" + }, + userAnswer: "" + } + ]; + +// Create the actual quiz here +function buildQuiz() { + // variable to store the html output + const output = []; + // Use forEach to loop through the quiz and create the HTML for each question + quizQuestions.forEach((currentQuestion, questionNumber) => { + // Now we want to store the list of answer choices in an empty array so we can calculate the final saving price result later + const answers = [] + for(answer in currentQuestion.answers) { + // Give users the ability to select their answer/choice + answers.push( + ` +
+
+
+ ${answer} +
+
+ +
+
+ + ` + ); + quizContainer.innerHTML = output.join(''); + } + + // add HTML for choice selection +}); +} diff --git a/assets/js/script.js b/assets/js/script.js index e69de29..55a0c09 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -0,0 +1,75 @@ +// We will use the index of the questions array to get the current question +Quiz.prototype.getQuestionIndex = function() { + return this.questionIndex; +} + +// Quiz Ended/Over script +Quiz.prototype.isEnded = function() { +} + +// This function is called when the user clicks on the start button +function Question(text, choices, answer) { + this.text = text; + this.choices = choices; + this.answer = answer; +} + +// Store the user's choice here +Question.prototype.userChoice = function(choice) { + return choice === this.answer; +}; + + +// A function for the user's chouce +function answer(id, choice) { + // Find the ID's in the HTML + var button = document.getElementById(id); +} + +// show progress +function showProgress() { + const currentQuestionNumber = quiz.questionIndex + 1; + const element = document.getElementById('progress'); + element.innerHTML = `Question ${currentQuestionNumber} of ${quiz.questions.length}`; +} + +// Create an array of questions here +var questions = [ + { + question: "What type of car do you want?", + answers: { + a: "Compact", + b: "Mid-Size", + c: "SUV" + }, + userAnswer: "" + }, + { + question: "What is your annual mileage?", + answers: { + a: "Less than 10,000", + b: "10,000 - 20,000", + c: "More than 20,000" + }, + userAnswer: "" + }, + { + question: "What is your budget?", + answers: { + a: "Less than $30,000", + b: "$30,000 - $50,000", + c: "$More than $50,000" + }, + userAnswer: "" + } + ]; + + +// Used the questions defined about to create the quiz +function Quiz(questions) { + this.score = 0; + this.questions = 0; + this.questionIndex = 0; +} + +var quiz = new Quiz(questions); diff --git a/index.html b/index.html index 1b5f286..3a4e6a3 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@
-
+

Welcome to Electrillo

Electrillo is a web application that will let users find out how driving an electric vehicle can save them money and improve the planet.

Start Here + Mission Statement

+
+ " +
+
+
+
+
+

Mission Statement

+

+ Electrillo is a web application that will let users find out how driving an electric vehicle can save them money and improve the + planet. +

+
+
+
+
@@ -89,6 +106,7 @@

Welcome to Electrillo

+ s + integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"> + integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"> \ No newline at end of file From 34d22c3d05ea7a24c4ad9bd03f23d378043827ec Mon Sep 17 00:00:00 2001 From: Alissa Troiano Date: Fri, 22 Apr 2022 18:52:39 -0400 Subject: [PATCH 2/6] Update homepage --- assets/css/style.css | 26 ++++++++++++++++++++++++-- assets/js/create-nav-and-footer.js | 2 +- index.html | 10 +++++----- questions.html | 20 ++++++++++---------- 4 files changed, 40 insertions(+), 18 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index a19d20d..cc49c08 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -65,12 +65,22 @@ h1, h2, h3, h4, h5, h6 { background-color: #79c1cca8; color: var(--p-blue-1); } -/* Landing Page */ +/* Landing Page */ .jumbotron { - height: 50vh; + max-width: 100%; + margin: 0 auto; +} + +.landing-page { + margin-top: 70px; + height: 100vh; + min-height: 100%; } +.mission-statement { + margin-top: 50px; +} #btn-main-2{ background-color: #79C1CC; @@ -131,5 +141,17 @@ a.footer-link { #footer-cta { background-color: #79c1cca8; padding: 5px 10px; +} +@media only screen and (min-width: 600px) { + .landing-page { + min-height: 100vh; + overflow: auto; + max-width: 100%; + padding: 30px 0; + margin: 0 auto; + } + .jumbotron { + margin-top: 90px; + } } \ No newline at end of file diff --git a/assets/js/create-nav-and-footer.js b/assets/js/create-nav-and-footer.js index d0ef383..be79d88 100644 --- a/assets/js/create-nav-and-footer.js +++ b/assets/js/create-nav-and-footer.js @@ -33,7 +33,7 @@ function createNavbar () { function createFooter () { container = document.getElementById("footer-container") container.innerHTML = ` -