Embedded Files
Solutions
Solutions
Solution 1 - Hello - can you vote?
Solution 1 - Hello - can you vote?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
<title>Can I vote</title>
</head>
<body>
<!-- Start body content -->
<h1>Can I Vote</h1>
Enter Name: <input id="nameInput" type="text">
<br>
Enter Age: <input id="ageInput" type="number">
<button id="submitBut">Enter Data</button>
<p id="output"></p>
<!-- Attach Script File -->
<script src="script.js"></script>
</body>
</html>
Script.js
//references to each tag/id in the html
const nameInput = document.getElementById("nameInput");
const ageInput = document.getElementById("ageInput");
const submitBut = document.getElementById("submitBut");
const output = document.getElementById("output");
submitBut.addEventListener("click", vote);
function vote() {
console.log('Button clicked');
var n = nameInput.value;
var a = parseInt(ageInput.value);
console.log(n);
console.log(a);
if (a > 17) {
output.innerHTML = "Hi " + n + " and you are " + a + " years old and you can vote";
} else {
output.innerHTML = "Hi " + n + " and you are " + a + " years old but you are too young to vote";
}
nameInput.value = '';
ageInput.value = '';
}
Solution 2 - Grade Calculator
Solution 2 - Grade Calculator
index.html
<html>
<head>
</head>
<body>
<h1>Activity 2 - Grade Caluclator</h1>
Enter Student Score:<input id = "grade" type="text">
Enter Test Max Score: <input id = "total" type="text">
<button id="calcBut">Calculate Grade</button>
<p id = "output"></p>
<script src = "script.js"></script>
</body>
</html>
script.js
//declare variables - global
var grade;
var total;
var score;
//references to html elements
const output = document.getElementById("output");
const gradeInput = document.getElementById("grade");
const totalInput = document.getElementById("total");
const calcBut = document.getElementById("calcBut");
//add event listener
calcBut.addEventListener('click', grades);
//calculates the test percentage and outputs final SACE grade
function grades() {
grade = gradeInput.value;
total = totalInput.value;
var percentage = Math.round((grade / total)*100); //round final percentage
if (percentage < 35) {
score = "F";
} else if (percentage < 49 ) {
score = "D";
} else if (percentage < 65 ) {
score = "C";
} else if (percentage < 85 ) {
score = "B";
}else{
score = "A"
}
output.innerHTML = "Percentage: " + percentage + "% Your grade is a " + score;
}
Solution 3 - Times Table Printer
Solution 3 - Times Table Printer
index.html
<html>
<head>
</head>
<body>
<h1>Times Table Generator</h1>
Enter a number: <input id = "input">
<button id="while" onClick="printTablesWhile()">Print - While Loop</button>
<button id="for" onClick="printTablesFor()">Print - For Loop</button>
<div id = "tables"></div>
<script src = "script.js"></script>
</body>
</html>
script.js
//make a reference to the input box
const input = document.getElementById("input");
const output = document.getElementById("tables");
function printTablesWhile(){
console.log("clicked");
var i = input.value;
var count = 1;
while(count <=10){
console.log(i*count);
output.innerHTML += i + " x " + count + " = " + i*count + "</br>";
//+= continues to join text to the output section of the page
count++;
}
}
function printTablesFor(){
var i = input.value;
for(var c = 0; c<=12; c++){
output.innerHTML += i + " x " + c + " = " + i*c + "</br>";
}
}
Solution 4 - Add up 10 Numbers
Solution 4 - Add up 10 Numbers
index.html
<html>
<head>
<title>Add Up 10 Numbers</title>
</head>
<body>
<h1>Task 4a - Add up 10 numbers</h1>
<h2 id ="countOut"></h2>
<p>Enter a Number</p>
<input type ="number" id="input">
<button id="but" onclick="addUp()">Add Number</button>
<hr>
<p id ="totalOut"></p>
<script src="script.js"></script>
</body>
</html>
Script.js
const input = document.getElementById("input");
const countOut = document.getElementById("countOut");
const totalOut = document.getElementById("totalOut");
const but = document.getElementById("but");
//global variables
var count = 0;
var total = 0;
but.style.display = "block";
totalOut.innerHTML = "The current total is " + total;
countOut.innerHTML = "Count: " + count;
function addUp() {
if (input.value != "") {
if (count < 10) {
count++;
var n = parseInt(input.value);
total = total + n;
//update values
totalOut.innerHTML = "The current total is " + total;
countOut.innerHTML = "Count: " + count;
input.value = "";
if (count == 10) {
but.style.display ="none";
totalOut.innerHTML = "You have added 10 numbers. The final total is " + total;
}
}
else {
totalOut.innerHTML = "You have added 10 numbers. The final total is " + total;
}
} else {
totalOut.innerHTML = "Please enter a number. The current total is " + total;
}
}
Solution 5 - Array Search
Solution 5 - Array Search
index.html
<html>
<head>
</head>
<body>
<h1>Array Search</h1>
Input a new number:<input id="newNumb" type="text">
<button id="newNumber" onClick="addNew()">Add a Number</button>
<p id = "list"></p>
<hr>
Search a number:<input id="search" type="text">
<button id="searchNumber" onClick="search()">Search a number</button>
<p id="output"></p>
<script src ="arraysearch.js"></script>
</body>
</html>
script.js
//global variables
var numberArray = [10,20,30,10,20,30,40,60,70];
//declare elements
const newInput=document.getElementById("newNumb");
const searchInput=document.getElementById("search");
const output=document.getElementById("output");
const list=document.getElementById("list");
printList();
//search for a number in the array
function search(){
var count=0;
var s = parseInt(searchInput.value); //convert to integer
for(var i =0; i<numberArray.length;i++){
if(numberArray[i]==s){
count++;
}
}
//feedback for user
if(count>0){
output.innerHTML="Found " + count;
}else{
output.innerHTML="Could not find any";
}
}
//add a new number to the array
function addNew(){
var n = parseInt(newInput.value); //convert to integer
numberArray.push(n); // add the new number to the array
console.log(numberArray); //print to console log
printList(); //run the function printList
}
//update and print the array list
function printList(){
list.innerHTML="";
for(var i =0; i<numberArray.length;i++){
list.innerHTML+= numberArray[i] + ", ";
}
}
Solution 6 - Basic Quiz using objects
Solution 6 - Basic Quiz using objects
index.html
<html>
<body>
<h1>Exercise 6a - Quiz with object storage</h1>
<h3 id ="question"></h3>
<input type="number" id ="input">
<button onclick="submitAnswer()">Submit</button>
<p id ="feedback"></p>
<script src="script.js"></script>
</body>
</html>
script.js
const input = document.getElementById('input');
const question = document.getElementById('question');
const feedback = document.getElementById('feedback');
//global variables
var qcount = 0;
var score = 0;
//array of questions stored as objects with properties q-question and a - answer
var questions = [
{q: "1+1", a: 2 },
{ q: "2+2", a: 4 },
{ q: "2+4", a: 6 },
{ q: "6+2", a: 8 },
{ q: "8+2", a: 10 },
{ q: "2+12", a: 14 },
];
//array of good feedback
var randomFeedback = ["Well done, that was correct", "Keep up the good work!", "You are so clever"];
//start the game by running the display question function at the beginning of the code
displayQuestion()
//process answer when button clicked and provide feedback - then trigger next question
function submitAnswer() {
//check for value
if (input.value != '') {
var ans = parseInt(input.value);
if (ans == questions[qcount].a) {
score++;
//provide a randon array item from random feedback using the math.round and math.random function
feedback.innerHTML = randomFeedback[Math.round(Math.random()*randomFeedback.length-1)];
} else {
feedback.innerHTML = "Incorrect. The correct answer was " + questions[qcount].a;
}
//increase question count and display next question
qcount++;
displayQuestion(); // get next question
} else {
feedback.innerHTML = "Please enter a number";
}
}
//display the next question in array
function displayQuestion() {
//check for end of quiz based on length of array
if (qcount < questions.length) {
//access the next question property in the array object
question.innerHTML = questions[qcount].q;
} else {
//quiz finished update feedback
feedback.innerHTML = "You have finished the quiz with a score of " + score + " / " + questions.length;
}
}
Solution 7 - Multiple Choice Quiz with Objects
Solution 7 - Multiple Choice Quiz with Objects
index.html
<html>
<head>
<title>Object Quiz with Multiple Choice</title>
</head>
<body>
<h1>Object Multiple Choice Quiz Exercise</h1>
<!-- display score -->
<h3 id ="scoreDisplay">Score: 0</h3>
<!-- display question from array / object -->
<h2 id ="questionDisplay">Question will show here</h2>
<!-- button for each input -->
<button id = 'buta' onclick="checkAnswer('a')">But A</button>
<button id = 'butb' onclick="checkAnswer('b')">But B</button>
<button id = 'butc' onclick="checkAnswer('c')">But C</button>
<button id = 'butd' onclick="checkAnswer('d')">But D</button>
<!-- are to display feedback -->
<h3 id ="feedback">Feedback area</h3>
<!-- link js file -->
<script src="script.js"></script>
</body>
</html>
script.js
const feedback = document.getElementById('feedback');
const buta = document.getElementById('buta');
const butb = document.getElementById('butb');
const butc = document.getElementById('butc');
const butd = document.getElementById('butd');
const questionDisplay = document.getElementById('questionDisplay');
const scoreDisplay = document.getElementById('scoreDisplay');
//global varibales for score & question count
var score = 0;
var qcount = 0;
//create an array of questions with objects
var questions = [
{ q: "1+1", a: 1, b: 2, c: 3, d: 4, ans: 'b' },
{ q: "1+3", a: 4, b: 3, c: 2, d: 1, ans: "a" },
{ q: "4-2", a: 4, b: 3, c: 2, d: 1, ans: "c" },
{ q: "3-1", a: 4, b: 3, c: 2, d: 1, ans: "d" },
];
showQuestion();
//print the next question from the array based on the question counter
function showQuestion() {
if (qcount < questions.length) {
questionDisplay.innerHTML = questions[qcount].q;
buta.innerHTML = "a. " + questions[qcount].a;
butb.innerHTML = "b. " + questions[qcount].b;
butc.innerHTML = "c. " + questions[qcount].c;
butd.innerHTML = "d. " + questions[qcount].d;
} else {
feedback.innerHTML = "Quiz Finished. You scored " + score + " / " + questions.length;
}
}
//Get answer from input, check answer and update score. Call the next question
function checkAnswer(but) {
console.log(but);
if (but == questions[qcount].ans) {
feedback.innerHTML = "correct";
score++;
scoreDisplay.innerHTML = "Score: " + score;
} else {
feedback.innerHTML = "Wrong. The correct answer was " + questions[qcount].ans;
}
qcount++;
showQuestion();
}
Solution 8 - Cash Register
Solution 8 - Cash Register
index.html
<html>
<head>
<title>Cash Register Exercise</title>
</head>
<body>
<h2>Cash Register</h2>
<h3>Select Items to add to the sale</h3>
<!-- area for buttons to be loaded -->
<div id ="buttons">
</div>
<hr>
<h3>Items on Sale</h3>
<h3 id ="totalOut">Total: $0.00</h3>
<!-- table created for bought items -->
<table id ="table" width="200px" border="1px">
<tr><th>Item</th><th>Price</th></tr>
</table>
<script src="script.js"></script>
</body>
</html>
script.js
const buttons = document.getElementById('buttons');
const table = document.getElementById('table');
const totalOut = document.getElementById('totalOut');
var total = 0;
var change = 0;
var cash = 0;
//list of items to buy
var items = [
{ name: "apples", price: 1 },
{name:"pears", price: 2}
];
createButtons(); //run at the start
//create buttons based on the number of items in the array list
function createButtons() {
for (var i = 0; i < items.length; i++){
buttons.innerHTML += '<button onclick ="addItem(' + i + ')">' + items[i].name + '</button>';
}
}
//when button clicked get the index from the buttun argument and add to the total and receipt
function addItem(foodIndex) {
total += items[foodIndex].price; //using index access price and add to total variable
totalOut.innerHTML = "Total: $" + total; //update total in html
//add contents to receipt in the table element
var row = table.insertRow(-1); //add a new row to the end of table
row.insertCell(0).innerHTML = items[foodIndex].name; //col 1
row.insertCell(1).innerHTML = "$" + items[foodIndex].price; //col 2
row.insertCell(2).innerHTML = '<input type="button" value="Delete" onclick="removeItem(this)">'; //col 3
}
//when delete button pressed passs in the row and use this to delete item from table
function removeItem(r) {
var i = r.parentNode.parentNode.rowIndex;//get row index number
var p = table.rows[i].cells[1].innerHTML //get value from cell
var price = parseInt(p.substring(1)); //strip $ and cast to int
table.deleteRow(i); //now can delete row number from table
//remove price from deleted item and update total
total -= price;
totalOut.innerHTML = "Total: $" + total;
}
Budget Application
Budget Application
Report abuse