Website 4

Replace script in editor and save as index.html.

<!DOCTYPE html>
<html>
<head>
   <title>CITG Website</title>
   <meta charset="UTF-8">
   <meta name="description" content="CUA Web Project">
   <meta name="keywords" content="HTML, CSS, JavaScript">
   <meta name="author" content="vasey" >
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="assets/styles.css">
   <script src="assets/translate.js"></script> 
</head>
<body>
   <header>
      CITG Website
   </header>

   <table align="center">
<tr><td>   
This website identifies local knowledge and protocols that will inform the users of the site. 
	The training that produced websites like this holds young people accountable for their actions, encourages their 
	reintegration into the community and promotes community awareness.</td>
<td>
<canvas id="logo" width="300" height="300">
	Your browser does not support the HTML5 canvas tag </canvas>
<script>
	var canvas=document.getElementById("logo");
	var ctx=canvas.getContext("2d");
	var origin = canvas.height / 2;
	ctx.translate(origin, origin);

// Outer Circle
	var radius = 115;
	ctx.beginPath();
	ctx.arc(0, 0, radius, 0, 2 * Math.PI, false);
	ctx.fillStyle = "black"; 
	ctx.fill();
	ctx.lineWidth = 5;
	ctx.strokeStyle = "red"; 
	ctx.stroke();

// Inner Circle
	var radius = 70;
	ctx.beginPath();
	ctx.arc(0, 0, radius, 0, 2 * Math.PI, false);
	ctx.fillStyle = "yellow"; 
	ctx.fill();
	// Small Circles
	var radius = 15;
	var xpos = [0,0,90,-90, 65, 65, -65, -65, 35, 35, -35, -35, 85, -85, 85, -85];
   var ypos = [90,-90,0,0, 65, -65, 65, -65, 85, -85, 85, -85, 35, 35, -35, -35];
	ctx.fillStyle = "yellow";
	for (num = 0; num < 17; num++){ 
	   ctx.beginPath();
	   ctx.arc(xpos[num], ypos[num], radius, 0, 2 * Math.PI, false); 
	   ctx.fill();
   }
	// Red Bars
	var xpos = [55, 55, 55, -145, -145, -145, 55, 55, 55,-145, -145, -145];
   var ypos = [-30,-7.5,15, -30,-7.5, 15, 12.5, -7.5, -30, 15,-7.5, -30];
   ctx.fillStyle="red";
   ctx.rotate(45 * Math.PI / 180);
   for (num = 0; num<3; num++) {
	   ctx.beginPath();
      ctx.rect(xpos[num], ypos[num], 90, 15);
      ctx.fill();   	
   }
   ctx.rotate(-90 * Math.PI / 180);
   for (num = 3; num<6; num++) {
	   ctx.beginPath();
      ctx.rect(xpos[num], ypos[num], 90, 15);
      ctx.fill();   	
   }
   ctx.rotate(-90 * Math.PI / 180);
   for (num = 6; num<9; num++) {
	   ctx.beginPath();
      ctx.rect(xpos[num], ypos[num], 90, 15);
      ctx.fill();   	
   }
   ctx.rotate(-90 * Math.PI / 180);
   for (num = 9; num<12; num++) {
	   ctx.beginPath();
      ctx.rect(xpos[num], ypos[num], 90, 15);
      ctx.fill();   	
   }
</script>   </td>
<td>The goal is to provide a fair and balanced response to young people who may have become disengaged from traditional learning. 
	There are opportunities across the state, country and even the world offering real jobs to young people 
	including those needing assistance to get back on track. </td></tr>
  </table>

<h2>Team Members</h2>
<table align="center">
   <tr><th>Given Name</th><th>Family Name</th><th>Community</th><th>Clan</th></tr>
   <tr><td>Jason</td><td>Harris</td><td>Bundaberg</td><td>Gubbi</td></tr>
   <tr><td>Eve</td><td>Jackson</td><td>Hervey Bay</td><td>Badtjala</td></tr>
   <tr><td>Adam</td><td>Johnson</td><td>Gin Gin</td><td>Wakka</td></tr>
   <tr><td>Isabel</td><td>Miller</td><td>Turkey Beach</td><td>Gooreng</td></tr>
</table>
   <h2>Community Map</h2>
   <div align="center">
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 300 500"
   height="500"
   width="300"
   id="svg2"
   version="1.1">
<g style="stroke:#0000ff;stroke-width:2;">
  <path
     id="Gooreng Gooreng" 
     d="m 19.435819,52.933534 c 18.794473,57.411126 11.259813,74.450936 0,85.778836 -2.735008,12.54814 -8.310415,24.22231 1.504892,40.63209 l 9.029351,38.37474 c 2.91691,12.80798 6.55847,24.3478 13.49796,30.11627 3.53597,-11.26585 11.22874,-24.17802 31.6488,-41.40296 l 28.592938,-21.06849 c 8.53414,-4.6455 17.08365,-9.20396 28.59295,3.00979 l 12.79158,12.03913 27.8405,-9.7818 13.54403,-11.28668 4.51468,2.25733 14.29647,-12.03913 -29.75387,-29.68937 -19.90756,-25.99163 c -4.42011,-10.56029 -5.43343,-20.552774 -3.76223,-30.097842 L 136.06494,68.734899 C 132.64399,61.611624 133.09988,51.719174 123.27336,49.171304 L 100.69998,30.360155 90.165742,16.816128 C 69.527782,28.267526 45.122372,40.472415 19.435819,52.933534 Z"
     style="fill:#00ffff;" />
  <path
     id="Waka Waka"
     d="m 43.468022,247.83547 c -5.5862,9.68757 46.46669,71.21228 28.01863,122.46749 -8.25629,11.86753 -3.95341,27.37822 7.23577,33.89385 18.6813,10.87841 36.018138,31.43434 46.080398,75.02347 12.52428,-9.097 24.83089,-15.14678 36.11934,-6.94223 6.54651,1.65117 12.27541,8.20801 18.24426,13.32516 4.55066,9.10133 13.58346,3.78623 15.32825,-4.09796 6.47411,-11.04405 15.99485,-14.47153 15.99485,-14.47153 l 5.01416,-0.90454 c -37.8475,-79.63375 -96.485,-118.75354 -70.40939,-265.71624 -11.7977,-4.32996 -16.67956,-29.25461 -41.38453,-15.04892 l -28.592938,21.06849 c -11.20944,11.16161 -23.36635,18.53339 -31.6488,41.40296 z"
     style="fill:#ffff00;" />
  <path
     id="Gubbi Gubbi"
     d="m 145.09429,200.41294 27.8405,-9.7818 13.54403,-11.28668 4.51468,2.25733 14.29647,-12.03913 1.40725,31.98182 c 5.53579,0.69197 9.05746,13.01767 10.32746,14.6009 2.10219,2.62067 9.25911,11.75194 9.25911,11.75194 -4.69727,-1.34208 -21.54776,12.20909 -26.70896,22.79165 -11.62389,13.17642 -4.28128,29.55791 -1.06836,29.55791 6.4325,9.19374 14.128,17.37709 25.28448,22.79165 l 22.79165,3.91731 1.06835,17.44986 v 16.02537 l -5.34179,14.24478 -5.34179,15.31314 7.83463,22.07941 -3.5612,27.06507 -0.35612,7.47851 -7.83462,34.89971 -17.54638,4.61749 c -20.88395,-41.21861 -55.10073,-87.35089 -69.86591,-140.45172 -10.69969,-38.47987 -9.36038,-80.60121 -0.54348,-125.26452 z"
     style="fill:#00ff00;" />
  <path
     id="Badtjala"
     d="m 226.28379,227.89732 c -12.11187,3.31871 -19.35745,13.1258 -26.70896,22.79165 -10.4142,15.05509 -6.09248,22.48816 -1.06836,29.55791 6.19435,9.54582 15.05466,16.76607 25.28448,22.79165 l 22.79165,3.91731 0.71223,-7.12239 7.83463,-6.05403 c 0.83147,-9.41564 3.69626,-12.05351 6.05403,-16.38149 0.5724,-13.40782 4.00561,-11.55803 6.05403,-17.09374 l 2.84896,-21.72328 8.54687,-11.75195 -1.7806,-9.97134 -8.90299,3.56119 -0.35612,4.98568 -6.05403,-4.27344 -5.69791,5.3418 0.71224,11.75194 3.20508,6.05403 c -2.07098,2.32985 -2.27197,17.86911 -1.42448,13.88866 0.41951,-1.97035 -7.83463,13.53254 -6.41015,12.10806 1.42448,-1.42448 -3.5612,8.19075 -3.5612,8.19075 l -1.78059,9.61522 c 0,0 0.71223,5.69791 -0.71224,4.98567 -1.42448,-0.71223 -9.25911,-21.01104 -9.25911,-21.01104 l 1.42448,-19.94269 -2.49284,-11.75195 z"
     style="fill:#d40000;" />
</g>   
<g style="stroke:#0000ff;stroke-width:1;font-size:30px;">
     <text x="0" y="25" transform="translate(90, 20) rotate(60)">Gooreng</text>
     <text x="0" y="75" transform="translate(90, 20) rotate(60)">Gooreng</text>
     <text x="175" y="275">Badtjala</text>
     <text x="0" y="75" transform="translate(210, 210) rotate(75)">Gubbi Gubbi</text>
     <text x="0" y="75" transform="translate(135, 210) rotate(75)">Waka Waka</text>
</g>
</svg>
   </div>

<h2>Community Information</h2>
<table align="center">
   <tr><th>Date</th><th>Place</th><th>Information</th><th>Name</th></tr>
   <tr><td>June 2021</td><td>Lowmead</td><td>Lorem Ipsum</td><td>Aunty Sally</td></tr>
   <tr><td>June 2021</td><td>Rosedale</td><td>Lorem Ipsum</td><td>Aunty Rena</td></tr>
   <tr><td>June 2021</td><td>Wartburg</td><td>Lorem Ipsum</td><td>Uncle John</td></tr>
   <tr><td>June 2021</td><td>Rules Beach</td><td>Lorem Ipsum</td><td>Uncle Mick</td></tr>
</table>

<h2 align="center">Languages</h2>
   <h2 align="center">Gooreng Gooreng - English</h2>
   <main>	
      <button onMouseDown="playBina()">Bina - Ears</button>
      <button onMouseDown="playBii()">Bii - Knee</button>
      <button onMouseDown="playBiru()">Biru - Hand</button>
      <button onMouseDown="playBulu()">Bulu - Belly</button>
    <br/>
      <button onMouseDown="playDaigil()">Daigil - Bone</button>
      <button onMouseDown="playDii()">Dii- Blood</button>
      <button onMouseDown="playDira()">Dira - Teeth</button>
      <button onMouseDown="playDjanyar()">Djanyar - Leg</button>
    <br/>
      <button onMouseDown="playDjina()">Djina - Foot</button>
      <button onMouseDown="playDulga()">Dulga - Heart</button>
      <button onMouseDown="playDunga()">Dunga - Tongue</button>
      <button onMouseDown="playGaman()">Gaman - Hip</button>
    <br/>
      <button onMouseDown="playGana()">Gana - Liver</button>
      <button onMouseDown="playGeem()">Geem - Mouth</button>
      <button onMouseDown="playGilun()">Gilun - Shoulders</button>
      <button onMouseDown="playGini()">Gini - Arm</button>
    <br/>
      <button onMouseDown="playGoomoo()">Goomoo - Elbow</button>
      <button onMouseDown="playGubu()">Gubu - Hair</button>
      <button onMouseDown="playGunGun()">Gun Gun - Face</button>
      <button onMouseDown="playMil()">Mil - Eyes</button>
    <br/>
      <button onMouseDown="playMundi()">Mundi - Bottom</button>
      <button onMouseDown="playMuru()">Muru - Nose</button>
      <button onMouseDown="playMundoie()">Mundoie - Toes</button>
      <button onMouseDown="playTeeping()">Teeping - Eyebrow</button>
    <br/>
      <button onMouseDown="playWandal()">Wandal - Neck</button>
      <button onMouseDown="playWogoo()">Wogoo - Belly Button</button>
      <button onMouseDown="playWugul()">Wugul - Ankle</button>
      <button onMouseDown="playWurul()">Wurul - Head</button>
    <br/>
      <button onMouseDown="playYillim()">Yillim - Lip</button>
      <button onMouseDown="playYinboo()">Yinboo - Chin</button>
      <button onMouseDown="playYulan()">Yulan - Skin</button>
    <br/>
   </main>
   <br/><br/>
<footer>Website Under Construction</footer>
</body>
</html>

Copy JS script in editor and save as translate.js in assets folder.

/* Translate Javascript */
function playWugul(){ 
	var music = new Audio('audio/wugul_ankle.mp3');
	music.play();
  }
 function playGini(){ 
	var music = new Audio('audio/gini_arm.mp3');
	music.play();
  }
 function playBulu(){ 
	var music = new Audio('audio/bulu_belly.mp3');
	music.play();
  }
 function playWogoo(){ 
	var music = new Audio('audio/wogoo_belly_button.mp3');
	music.play();
  }
 function playDii(){ 
	var music = new Audio('audio/dii_blood.mp3');
	music.play();
  }
 function playDaigil(){ 
	var music = new Audio('audio/daigil_bone.mp3');
	music.play();
  }
 function playMundi(){ 
	var music = new Audio('audio/mundi_bottom.mp3');
	music.play();
  }
 function playYinboo(){ 
	var music = new Audio('audio/yinboo_chin.mp3');
	music.play();
  }
 function playBina(){ 
	var music = new Audio('audio/bina_ears.mp3');
	music.play();
  }
 function playGoomoo(){ 
	var music = new Audio('audio/goomoo_elbow.mp3');
	music.play();
  }
 function playTeeping(){ 
	var music = new Audio('audio/teeping_eyebrow.mp3');
	music.play();
  }
 function playMil(){ 
	var music = new Audio('audio/mil_eyes.mp3');
	music.play();
  }
 function playGun_Gun(){ 
	var music = new Audio('audio/gungun_face.mp3');
	music.play();
  }
 function playDjina(){ 
	var music = new Audio('audio/djina_foot.mp3');
	music.play();
  }
 function playGubu(){ 
	var music = new Audio('audio/gubu_hair.mp3');
	music.play();
  }
 function playBiru(){ 
	var music = new Audio('audio/biru_hand.mp3');
	music.play();
  }
 function playWurul(){ 
	var music = new Audio('audio/wurul_head.mp3');
	music.play();
  }
 function playDulgu(){ 
	var music = new Audio('audio/dulgu_heart.mp3');
	music.play();
  }
 function playGaman(){ 
	var music = new Audio('audio/gaman_hip.mp3');
	music.play();
  }
 function playBii(){ 
	var music = new Audio('audio/bii_knee.mp3');
	music.play();
  }
 function playDjanyar(){ 
	var music = new Audio('audio/djanyar_leg.mp3');
	music.play();
  }
 function playYillim(){ 
	var music = new Audio('audio/yillim_lip.mp3');
	music.play();
  }
 function playGana(){ 
	var music = new Audio('audio/gana_liver.mp3');
	music.play();
  }
 function playGeem(){ 
	var music = new Audio('audio/geem_mouth.mp3');
	music.play();
  }
function playWandal(){ 
	var music = new Audio('audio/wandal_neck.mp3');
	music.play();
  }
 function playMuru(){ 
	var music = new Audio('audio/muru_nose.mp3');
	music.play();
  }
 function playGilun(){ 
	var music = new Audio('audio/gilun_shoulders.mp3');
	music.play();
  }
 function playYulan(){ 
	var music = new Audio('audio/yulan_skin.mp3');
	music.play();
  }
 function playDira(){ 
	var music = new Audio('audio/dira_teeth.mp3');
	music.play();
  }
 function playDunga(){ 
	var music = new Audio('audio/dunga_tongue.mp3');
	music.play();
  }  
function playMundoie(){
  var music = new Audio('audio/mundoie_toes.mp3');
  music.play();
  }