Question
In: Computer Science
lab3 exercise 5 html <!DOCTYPE html> <!-- Webpage HTML document for Lab 03. Author: Amir H...
lab3 exercise 5
html
<!DOCTYPE html>
<!-- Webpage HTML document for Lab 03.
Author: Amir H Chinaei
For: EECS 1012, York University, Lassonde School of Engineering -->
<html lang="En">
<head>
<meta charset="UTF-8">
<title> EECS1012: Lab 3 - My Kit </title>
<!-- in Ex1, add a link tag here to connect it to the css file -->
<link rel="stylesheet" type="text/css" href="myLearningKit_ex2.css">
<script src="myLearningKit_ex4.js"></script>
<!-- in Ex2, add a script tag here to connect it to the js file -->
</head>
<body>
<header>
<h1> My Computational Thinking Kit </h1>
<nav>
<!-- In Ex2, add an attribute onclick to button-->
<button onclick="p01Func()">Problem01</button>
<button onclick="p02Func()">Problem02</button>
<!-- In Ex4, add an attribute onclick to button-->
<button onclick="p03Func()">Problem03</button>
<button onclick="p04Func()">Problem04</button>
<button onclick="p05Func()">Problem05</button>
<button onclick="p06Func()">Problem06</button>
<button onclick="p07Func()">Problem07</button>
<button onclick="p08Func()">Problem08</button>
<button onclick="p09Func()">Problem09</button>
<button onclick="p010Func()">Problem10</button>
</nav>
</header>
<div id="problem" class="problem">
<img id="flowchart" src="">
</div>
<div class="column1 design">
<!-- in Ex3, add an attribute onclick to the following input-->
<input id="check1" type="checkbox" onclick="checkUncheck1()"> Design
<img id="flowchart" src="" alt="" onclick="dosaDesign.jpg" ondblclick="scale()">
<!-- in Ex5, add attributes onclick and ondblclick to the following img-->
</div>
<div class="column2 jsSolution">
<input id="check2" type="checkbox" onclick="checkUncheck2()"> JavaScript Solution
<img id="js" src="" alt="" onclick="dosa1.jpg" ondblclick="">
</div>
<div class="column3 otherSolution">
<input id="check3" type="checkbox" onclick="checkUncheck3()"> Another Solution
<img id="another" src="null" alt="" >
</div>
<footer>(c) Author of this web page: <span>Seo Jun Park</span> </footer>
</body>
</html>
javascripts
function p01Func() {
document.getElementById("problem").innerHTML ="<p>I'm looking for a type of pancake originating from the indian subcontinent, made from a fermented batter. It is somewhat similar to a crepe in appearance";
document.getElementById("flowchart").setAttribute("src", "images/dosa/dosaDesign.jpg");
document.getElementById("flowchart").style.display = "none";
document.getElementById("js").setAttribute("src", "images/dosa/dosaDesign.jpg");
document.getElementById("js").style.display="none";
document.getElementById("check1").checked = false;
document.getElementById("check2").checked = false;
document.getElementById("check3").checked = false;
}
function p02Func() {
document.getElementById("problem").innerHTML="<p>I'm looking for an Iranian dish that consists of grilled chunks of chicken which are sometimes with bone and other times without bone. It's one of the most popular dishes of Iran. It is common to marinate the chunks in minced onion, lemon juice and sometimes saffron."
document.getElementById("flochart").style.display="none";
document.getElementById("js").src='images/jujeh2.jpg';
document.getElementById("js").style.display="none";
}
/* in Ex2, add a getElementById here to get the "probelm" div and
set its innerHTML to <p>I'm looking for a type of ...</p>
*/
function checkUncheck1() {
if (document.getElementById("check1").checked == true) {//get inline function
document.getElementById("flowchart").style.display = "inline";
document.getElementById("flowchart").setAttribute("src","images/jujeh/jujehDesign.jpg");
}
else {
document.getElementById("flowchart").style.display = "none";
}
}
function checkUncheck2() {
if (document.getElementById("check2").checked == true) {
document.getElementById("js").style.display = "inline";
document.getElementById("js").setAttribute("src","images/jujeh/jujeh1.jpg");
}
else {
document.getElementById("js").style.display = "none";
}
}
function checkUncheck3() {
if (document.getElementById("check2").checked == true) {
document.getElementById("another").style.display = "inline";
document.getElementById("another").setAttribute("src","images/jujeh/jujeh2.jpg");
}
else {
document.getElementById("another").style.display = "none";
}
}
function p02func() {
document.getElementById("problem").innerHTML = "<p>I'm looking for a type of pancake originating from the indian subcontinent, made from a fermented batter. It is somewhat similar to a crepe in appearance";
document.getElementById("flowchart").setAttribute("src", "images/jujeh/jujehDesign.jpg");
document.getElementById("flowchart").style.display = "none";
document.getElementById("js").setAttribute("src", "images/jujeh/jujehDesign.jpg");
document.getElementById("js").style.display = "none";
document.getElementById("check1").checked=false;
document.getElementById("check2").checked=false;
}
zoom-false;
function zoomIn() {
document.getElementById("flowchart").style.transform="scale(2)";
}
function zoomOut() {
document.getElementById("flowchart").style.transform="scale(1)";
}
function scale(){
if(zoom==false){
zoomIn();
zoom=true;
}
else{
zoomOut();
zoom=false;
}
}
/* in Ex4, or step 4 of Ex2, you need to create function
checkUncheck3, which is similar to checkUncheck 1 and 2
*/
/* in Ex4, create function p02Func similar to p01Func */
Solutions
Expert Solution
Replace the exiting lines with below line of code as applicable:
<!-- in Ex1, add a link tag here to connect it to the css file -->
<link rel="stylesheet" type="text/css" href="myLearningKit_ex2.css" />
<!-- in Ex2, add a script tag here to connect it to the js file -->
<script type="text/javascript" src="myLearningKit_ex4.js"></script>
<!-- In Ex2, add an attribute onclick to button-->
<button onclick="p01Func()">Problem01</button>
<!-- In Ex4, add an attribute onclick to button-->
<button onclick="p02Func()">Problem02</button>
<!-- in Ex3, add an attribute onclick to the following input-->
<input id="check1" type="button" onclick="checkUncheck1()"> Design <!-- add below line in js script , where function checkUncheck1 is defined check1.onclick = checkUncheck1; -->
<!-- in Ex5, add attributes onclick and ondblclick to the following img--> <img id="flowchart" ondblclick="scale()" onclick="dosaDesign.jpg" src="" >
/* in Ex2, add a getElementById here to get the "probelm" div and
set its innerHTML to <p>I'm looking for a type of ...</p>
*/
document.getElementById("problem").innerHTML="<p>I'm looking for a type of ...</p>"
/* in Ex4, or step 4 of Ex2, you need to create function
checkUncheck3, which is similar to checkUncheck 1 and 2
*/
function checkUncheck3() {
if (document.getElementById("check3").checked == true) {
document.getElementById("another").style.display = "inline";
document.getElementById("another").setAttribute("src","images/jujeh/jujeh2.jpg");
}
else {
document.getElementById("another").style.display = "none";
}
}
/* in Ex4, create function p02Func similar to p01Func */
function p02func() {
document.getElementById("problem").innerHTML = "<p>I'm looking for a type of pancake originating from the indian subcontinent, made from a fermented batter. It is somewhat similar to a crepe in appearance";
document.getElementById("flowchart").setAttribute("src", "images/jujeh/jujehDesign.jpg");
document.getElementById("flowchart").style.display = "none";
document.getElementById("js").setAttribute("src", "images/jujeh/jujehDesign.jpg");
document.getElementById("js").style.display = "none";
document.getElementById("check1").checked=false;
document.getElementById("check2").checked=false;
}
venereology answered 1 year agoRelated Solutions
- Engine Cycles a. Write a description of an 'engine cycle'. Use figures, grabs and/or image to...
- orley Company buys surgical supplies from a variety of manufacturers and then resells and delivers these...
- You are creating an enhanced entity relationship model for a campus information system. A junior team...
- The following time series shows the sales of a particular product over the past 12 months....
- Would the voltage of a battery in circuit be larger or smaller than the voltage of...
- The current asset section of the Excalibur Tire Company’s balance sheet consists of cash, marketable securities,...
- Part 1: Explain and provide a real life business example for equivalent units. Explain the importance...