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 ago
Next > < Previous

Related Solutions

IDS 201 Lab Exercise 5 Within a class named LX5, write methods as follows: 1. a...
IDS 201 Lab Exercise 5 Within a class named LX5, write methods as follows: 1. a method named valueCheck that accepts a parameter int named value and, using a switch statement, displays text output as follows: if value is 4 or greater: "LOTS" if value equals 3: "three" if value equals 2: "two" if value equals 1: "one" if value equals 0: "zero" if value is negative: "NEGATIVE" 2. a method named textMatch that accepts two parameter String objects named...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT