Explore

s24_csd3103_Asgn1_BUILDING THE 3 Tier MVC Application

How to set PowerShell Execution Policy to allow Node.js Programs to run on Windows

(You will know you need this if you see a message when running Node about scripts are disabled)

⁠

https://coda.io/@peter-sigurdson/setting-execution-script-policy-to-allow-running-node⁠

⁠

Learning Outcomes:

Reflect on the inter action of JS, CSS, HTML selectors in the BOM

How to make a Web Application:

A web application starts with the browser, or more specifically, a processing engine inside the browser called the BOM, or browser object model.

The Way we make a web application is we create a browser object model wrapped up in a larger container called a document object model, which is the web page and the browser object model is created by the browser.

The browser inputs a DOM or a set of HTML tags, which is a web page.

Then from within that web page, we can communicate out with an external server, such as node.JS coded servers we're going to write, and we can use the browser to display information to user and retrieve information back from user using a HTML scripting format called a Form.

Our Learning Workflow:

Step 1:

Let’s make a simple HTML DOM, which is what people call a “Web Page”.

We will use a text editor called Sublime to make a Simple HTML Document.

⁠

https://www.sublimetext.com/download⁠

Learning Points:

The basic markup languages involved in making a “client-side” web page (lives and works in the Browser):

HTML : provides the structure

CSS: Cascading Style Sheets : decorator of our Web Page

JavaScript: provides the control and processing intelligence of our Web Page.

Let's amplify the starter page with the use of some structural HMTL Tags:

div, section, and aside elements to provide structured information about Brown Bears.

2 kinds of HTML tags:

content h1, p, img, table

structural div section

Starter HTML :

<!DOCTYPE html>

<head>

<title>Brown Bear Information</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

}

header, main, aside {

padding: 20px;

}

header {

background-color: #4CAF50;

color: white;

text-align: center;

padding: 10px 0;

}

main {

display: flex;

justify-content: space-between;

}

section {

flex: 3;

padding: 20px;

background-color: #f4f4f4;

margin-right: 20px;

}

aside {

flex: 1;

padding: 20px;

background-color: #ddd;

}

footer {

background-color: #333;

color: white;

text-align: center;

padding: 10px 0;

position: fixed;

width: 100%;

bottom: 0;

}

</style>

</head>

<body>

<h1>All About Brown Bears</h1>

</header>

<main>

<h2>Introduction</h2>

<p>The Brown Bear (Ursus arctos) is a large bear species found across Eurasia and North America. They are the most widely distributed bear species and have several recognized subspecies.</p>

<h2>Habitat</h2>

<p>Brown bears inhabit diverse environments including forests, mountains, and tundra. They can be found in North America, Europe, and Asia.</p>

<p>Brown bears are omnivorous, feeding on a variety of foods. Their diet includes berries, roots, insects, fish, and mammals. They have a particular preference for salmon where available.</p>

</section>

<aside>

<h2>Quick Facts</h2>

<ul>

<li><strong>Scientific Name:</strong> Ursus arctos</li>

<li><strong>Lifespan:</strong> 20-30 years in the wild</li>

<li><strong>Weight:</strong> Up to 600 kg (1,322 lbs)</li>

<li><strong>Length:</strong> 1.4 to 2.8 meters (4.6 to 9.2 feet)</li>

<li><strong>Subspecies:</strong> Grizzly bear, Kodiak bear, Eurasian brown bear, etc.</li>

</ul>

<h2>Conservation Status</h2>

<p>Brown bears are classified as Least Concern by the IUCN, but some subspecies are threatened due to habitat loss and human conflict.</p>

</aside>

</main>

</footer>

</body>

</html>

Explanation:

HTML Structure: The page is divided into several semantic elements:

header,

main,

section,

aside, and

footer.

Styling: Basic CSS is used to style these elements, providing padding, background colors, and layout using flexbox.

Content:

Header: Contains the title of the page.

Main: Uses flexbox to layout section and aside side by side.

Section: Contains detailed information about Brown Bears, divided into subheadings such as Introduction, Habitat, and Diet.

Aside: Contains quick facts and conservation status, providing a summary of key information.

Footer: Contains copyright information.

This layout ensures that the page is well-structured, visually appealing, and easy to navigate.

Bear Page 3

Let’s expand the page to include a JavaScript-based quiz about bears.

We'll add a script that creates a simple quiz, checks the user's answers, and provides feedback.

Here's the updated HTML:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Brown Bear Information</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header, main, aside, footer { padding: 20px; } header { background-color: #4CAF50; color: white; text-align: center; padding: 10px 0; } main { display: flex; justify-content: space-between; } section { flex: 3; padding: 20px; background-color: #f4f4f4; margin-right: 20px; } aside { flex: 1; padding: 20px; background-color: #ddd; } footer { background-color: #333; color: white; text-align: center; padding: 10px 0; position: fixed; width: 100%; bottom: 0; } #quiz { margin-top: 20px; } .quiz-question { margin-bottom: 20px; } .quiz-question p { margin: 0; } .quiz-question input { margin-right: 10px; } #result { margin-top: 20px; } </style> </head> <body> <header> <h1>All About Brown Bears</h1> </header> <main> <section> <h2>Introduction</h2> <p>The Brown Bear (Ursus arctos) is a large bear species found across Eurasia and North America. They are the most widely distributed bear species and have several recognized subspecies.</p>

<h2>Habitat</h2> <p>Brown bears inhabit diverse environments including forests, mountains, and tundra. They can be found in North America, Europe, and Asia.</p>

<h2>Diet</h2> <p>Brown bears are omnivorous, feeding on a variety of foods. Their diet includes berries, roots, insects, fish, and mammals. They have a particular preference for salmon where available.</p>

<div id="quiz"> <h2>Bear Quiz</h2> <div class="quiz-question"> <p>1. What is the scientific name of the Brown Bear?</p> <label><input type="radio" name="q1" value="Ursus arctos"> Ursus arctos</label><br> <label><input type="radio" name="q1" value="Ursus maritimus"> Ursus maritimus</label><br> <label><input type="radio" name="q1" value="Ursus americanus"> Ursus americanus</label><br> </div> <div class="quiz-question"> <p>2. What do Brown Bears primarily eat?</p> <label><input type="radio" name="q2" value="Berries"> Berries</label><br> <label><input type="radio" name="q2" value="Fish"> Fish</label><br> <label><input type="radio" name="q2" value="Insects"> Insects</label><br> <label><input type="radio" name="q2" value="All of the above"> All of the above</label><br> </div> <div class="quiz-question"> <p>3. In which continents can Brown Bears be found?</p> <label><input type="radio" name="q3" value="North America"> North America</label><br> <label><input type="radio" name="q3" value="Europe"> Europe</label><br> <label><input type="radio" name="q3" value="Asia"> Asia</label><br> <label><input type="radio" name="q3" value="All of the above"> All of the above</label><br> </div> <button onclick="checkQuiz()">Submit</button> <div id="result"></div> </div> </section> <aside> <h2>Quick Facts</h2> <ul> <li><strong>Scientific Name:</strong> Ursus arctos</li> <li><strong>Lifespan:</strong> 20-30 years in the wild</li> <li><strong>Weight:</strong> Up to 600 kg (1,322 lbs)</li> <li><strong>Length:</strong> 1.4 to 2.8 meters (4.6 to 9.2 feet)</li> <li><strong>Subspecies:</strong> Grizzly bear, Kodiak bear, Eurasian brown bear, etc.</li> </ul>

<h2>Conservation Status</h2> <p>Brown bears are classified as Least Concern by the IUCN, but some subspecies are threatened due to habitat loss and human conflict.</p> </aside> </main> <footer> <p>© 2024 Brown Bear Info. All rights reserved.</p> </footer> <script> function checkQuiz() { var score = 0; var totalQuestions = 3;

var q1 = document.querySelector('input[name="q1"]:checked'); var q2 = document.querySelector('input[name="q2"]:checked'); var q3 = document.querySelector('input[name="q3"]:checked');

if (q1 && q1.value === 'Ursus arctos') { score++; } if (q2 && q2.value === 'All of the above') { score++; } if (q3 && q3.value === 'All of the above') { score++; }

var result = document.getElementById('result'); result.innerHTML = 'You scored ' + score + ' out of ' + totalQuestions + '.';

if (score === totalQuestions) { result.innerHTML += ' Excellent!'; } else if (score === totalQuestions - 1) { result.innerHTML += ' Good job!'; } else { result.innerHTML += ' Better luck next time.'; } } </script> </body> </html>

### Explanation:

1. **Quiz Structure**: The quiz is added within a `div` element inside the `section`. 2. **Quiz Questions**: Three questions are provided, each with multiple-choice answers using radio buttons. 3. **Submit Button**: A button calls the `checkQuiz` function when clicked. 4. **JavaScript Function**: - The `checkQuiz` function calculates the score based on selected answers. - It checks the value of selected radio buttons and compares them with correct answers. - The result is displayed in the `div` with the ID `result`.

This interactive quiz enhances user engagement and provides a way to test their knowledge about Brown Bears.

JavaScript Quiz with Logging

<h2>Habitat</h2> <p>Brown bears inhabit diverse environments including forests, mountains, and tundra. They can be found in North America, Europe, and Asia.</p>

var q1 = document.querySelector('input[name="q1"]:checked'); var q2 = document.querySelector('input[name="q2"]:checked'); var q3 = document.querySelector('input[name="q3"]:checked');

console.log("q1:", q1 ? q1.value : "not selected"); console.log("q2:", q2 ? q2.value : "not selected"); console.log("q3:", q3 ? q3.value : "not selected");

if (!q1 || !q2 || !q3) { alert("Please answer all the questions."); return; }

if (q1.value === 'Ursus arctos') { score++; } if (q2.value === 'All of the above') { score++; } if (q3.value === 'All of the above') { score++; }

var result = document.getElementById('result'); result.innerHTML = 'You scored ' + score + ' out of ' + totalQuestions + '.';

console.log("Quiz result: " + score + " out of " + totalQuestions); } </script> </body> </html>

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.