Final project code index.html
Weather and Climate
open window Next
Weather
Exercises
Weather and Climate
Generally our elders try to predict rain.Sometimes their expectations come true andsometimes not. They look for some indicators to make such predictions.Now open the window and check whether it is raining or not....
open window Next
<div class="body1">
<div class="heading">Weather</div>
<div class="sec2" style="margin-top:2%">
<img src="https://media3.giphy.com/media/Ke7i5t6QDmDSO82Uga/giphy.gif" class="giphy" style="float:right"/>
<div class="desc">The state of the atmosphere with respect to wind, temperature, cloudiness, moisture, pressure, etc is called Weather.<br>Examples:Weather includes sunshine, rain, cloud cover, winds, hail, snow, sleet, freezing rain, flooding, blizzards, ice storms, thunderstorms, steady rains from a cold front or warm front, excessive heat, heat waves and more....</div>
<b>Weather components</b>
<ul>
<li>Temperature</li>
<li>Rainfall</li>
<li>Wind Speed</li>
<li>Humidity</li>
</ul>
</div>
<button onclick="myMove3(1)" id="pbtn" class="btn btn-success">Previous</button>
<button onclick="myMove2(1)" id="obtn" class="btn btn-success">Next</button><br><br>
</div>
<div class="body1">
<div class="heading">Temperature</div>
<div class="sec2">
<b>Temperature</b>
<img src="https://media.tenor.com/images/f8519dd5570f9e05d17c413b50e7eccc/tenor.gif" class="giphy" style="float:right"/>
<div class="desc">A measure of the ability of a substance, or more generally of any physical system,to transfer heat energy to another physical system. The temperature of a substance is closely related to the average kinetic energy of its molecules.</div>
<b>There are three temperature scales</b>
<ul>
<li>Farenheit</li>
<li>Kelvin</li>
<li>Celcius</li>
</ul>
</div>
<button onclick="myMove3(2)" id="pbtn" class="btn btn-success">Previous</button>
<button onclick="myMove2(2)" id="obtn" class="btn btn-success">Next</button><br><br>
</div>
<div class="body1">
<p>Hey guys, Here is something interesting....<br>What are you waiting for...?<br>Open the box and see what's inside....</p>
<div class="bg" id="box1">
<img src="images/gift4.jpg" class="bg" onclick="show1()" id="ins1">
</div><br><br>
<p id="info1"></p>
<button onclick="myMove3(3)" id="pbtn" class="btn btn-success">Previous</button>
<button onclick="myMove2(3)" id="obtn" class="btn btn-success">Next</button><br><br>
</div>
<div class="body1">
<div class="subheading">Temperature Conversions</div>
<p>Click on these blocks to perform specifed conversions</p>
<div class="container-fluid" style="margin-left:20%" cellspacing="20">
<div class="row">
<div class="col-lg-4" style="margin:2%" id="a1" onclick="convert(1)">Celcius to Farenheit</div>
<div class="col-lg-4" style="margin:2%" id="a1" onclick="convert(2)">Farenheit to Celcius</div>
<div class="col-lg-4" style="margin:2%" id="a1" onclick="convert(3)">Celcius to Kelvin</div>
</div>
<div class="row">
<div class="col-lg-4" style="margin:2%" id="a1" onclick="convert(4)">Kelvin to Celcius</div>
<div class="col-lg-4" style="margin:2%" id="a1" onclick="convert(5)">Kelvin to Farenheit</div>
<div class="col-lg-4" style="margin:2%" id="a1" onclick="convert(6)">Farenheit to Kelvin</div>
</div>
</div>
<section class="conversion">
<forms>
<label for="celcius">Celcius</label>
<input type="number" name="celcius" oninput="ctof(this.value)"></input>
<p style="margin-left:-75%">Fahrenheit:<span id="out1"></span></p>
</forms>
</section>
<section class="conversion">
<forms>
<label for="farenheit">Farenheit</label>
<input type="number" name="farenheit" oninput="ftoc(this.value)"></input>
<p style="margin-left:-75%">Celcius:<span id="out2"></span></p>
</forms>
</section>
<section class="conversion">
<forms>
<label for="celcius">Celcius</label>
<input type="number" name="celcius" oninput="ctok(this.value)"></input>
<p style="margin-left:-75%">Kelvin:<span id="out3"></span></p>
</forms>
</section>
<section class="conversion">
<forms>
<label for="kelvin">Kelvin</label>
<input type="number" name="kelvin" oninput="ktoc(this.value)"></input>
<p style="margin-left:-75%">Celcius:<span id="out4"></span></p>
</forms>
</section>
<section class="conversion">
<forms>
<label for="kelvin">Kelvin</label>
<input type="number" name="kelvin" oninput="ktof(this.value)"></input>
<p style="margin-left:-75%">Fahrenheit:<span id="out5"></span></p>
</forms>
</section>
<section class="conversion">
<forms>
<label for="farenheit">Farenheit</label>
<input type="number" name="farenheit" oninput="ftok(this.value)"></input>
<p style="margin-left:-75%">Kelvin:<span id="out6"></span></p>
</forms>
</section>
<button onclick="myMove3(4)" id="pbtn" class="btn btn-success">Previous</button>
<button onclick="myMove2(4)" id="obtn" class="btn btn-success">Next</button><br><br>
</div>
<div class="body1">
<div class="heading">Rainfall</div>
<div class="sec2">
<b>Rainfall</b>
<img src="https://i.pinimg.com/originals/54/53/00/545300a1f65ed2508c302e2c723bfa23.gif" class="giphy" style="float:right"/>
<div class="desc">The quantity of rain falling within a given area in a given time.Rain is liquid water in the form of droplets that have condensed from atmospheric water vapor and then become heavy enough to fall under gravity. Rain is a major component of the water cycle and is responsible for depositing most of the fresh water on the Earth.It provides suitable conditions for many types of ecosystems, as well as water for hydroelectric power plants and crop irrigation.</div>
</div>
<button onclick="myMove3(5)" id="pbtn" class="btn btn-success">Previous</button>
<button onclick="myMove2(5)" id="obtn" class="btn btn-success">Next</button><br><br>
</div>
<div class="body1">
<p>Hey guys, Here is something interesting....<br>What are you waiting for...?<br>Open the box and see what's inside....</p>
<div class="bg" id="box2">
<img src="images/gift4.jpg" class="bg" onclick="show2()" id="ins2">
</div><br><br>
<p id="info2"></p>
<button onclick="myMove3(6)" id="pbtn" class="btn btn-success">Previous</button>
<button onclick="myMove2(6)" id="obtn" class="btn btn-success">Next</button><br><br>
</div>
<div class="body1">
<div class="heading">Wind Speed</div>
<div class="sec2">
<b>Wind</b>
<img src="https://media.tenor.com/images/43fb7332cf6a73309e980b32852cc378/tenor.gif" class="giphy" style="float:right"/>
<div class="desc">Wind speed describes how fast the air is moving past a certain point.Wind is the flow of gases on a large scale. On the surface of the Earth, wind consists of the bulk movement of air. In outer space, solar wind is the movement of gases or charged particles from the Sun through space, while planetary wind is the outgassing of light chemical elements from a planet's atmosphere into space. Winds are commonly classified by their spatial scale, their speed, the types of forces that cause them, the regions in which they occur, and their effect.</div>
</div>
<button onclick="myMove3(7)" id="pbtn" class="btn btn-success">Previous</button>
<button onclick="myMove2(7)" id="obtn" class="btn btn-success">Next</button><br><br>
</div>
<div class="body1">
<p>Hey guys, Here is something interesting....<br>What are you waiting for...?<br>Open the box and see what's inside....</p>
<div class="bg" id="box3">
<img src="images/gift4.jpg" class="bg" onclick="show3()" id="ins3">
</div><br><br>
<p id="info3"></p>
<button onclick="myMove3(8)" id="pbtn" class="btn btn-success">Previous</button>
<button onclick="myMove2(8)" id="obtn" class="btn btn-success">Next</button><br><br>
</div>
<div class="body1">
<div class="heading">Humidity</div>
<div class="sec2" style="margin-top:2%">
<b>Humidity</b>
<img src="https://weather-and-climate.com/uploads/average-relative-humidity-india-nagpur.png" class="giphy" style="float:right"/>
<div class="desc">Humidity is the amount of water vapor in the atmosphere.</div>
<b>How to calculate humidity?</b><br>
h=(h1/h2)*100<br>h1=e^k1<br>k1=n1/d1<br>n1=17.625*dp /*where dp is dew point temperature*/<br>d1=243.04+dp<br>h2=e^k2<br>k2=n2/d2<br>n2=17.625*t /*where t is temperature in atmosphere */<br>d2=243.04+t
</div>
<button onclick="myMove3(9)" id="pbtn" class="btn btn-success">Previous</button>
<button onclick="myMove2(9)" id="obtn" class="btn btn-success">Next</button><br><br>
</div>
<div class="body1">
<div class="subheading">Calculation of Humidity</div>
<forms>
<label>Temperature</label>
<input type="number" name="temp" id="tem"></input>
<label>Dew point</label>
<input type="number" name="dpoint" id="dpoint"></input>
<p class="ps">Humidity:<span id="humid"></span></p>
<div id="a1" onclick="calculate()">Calculate</div>
</forms>
<button onclick="myMove3(10)" id="pbtn" class="btn btn-success">Previous</button>
<button onclick="myMove2(10)" id="obtn" class="btn btn-success">Next</button><br><br>
</div>
<div class="body1">
<div class="heading">Climate</div>
<div class="sec2" style="margin-top:1%">
<img src="https://www.iberdrola.com/wcorp/gc/prod/en_US/comunicacion/adaptacion_cambio_climatico_mult_1_res/Adaptacion_746x419.jpg" class="giphy" style="float:right"/>
<div class="desc">The average weather pattern taken over a long time, say 25 years, is called climate of that place.Broadly, the same patterns of temperature, rainfall, humidity wind speed that have been generally continuing for a long time, say the last 25 years, at a place gives the climate of that place.If we find that temperature at a place is generally high for large part of the year, we say the climate of that place is hot.</div>
<b>Climate components</b>
<ul>
<li>Radiation</li>
<li>Air pressure</li>
<li>Precipitation</li>
<li>Condensation</li>
<li>Cloud cover</li>
</ul>
</div>
<button onclick="myMove3(11)" id="pbtn" class="btn btn-success">Previous</button>
<button onclick="myMove2(11)" id="obtn" class="btn btn-success">Next</button><br><br>
</div>
<div class="body1">
<div class="heading">Radiation</div>
<div class="sec2">
<img src="images/radiation.gif" class="giphy" style="float:right"/>
<div class="desc">Radiation is the emission and propagation of energy in the form of waves,rays or particles.Radiation is often categorized as either ionizing or non-ionizing depending on the energy of the radiated particles. Ionizing radiation carries more than 10 eV, which is enough to ionize atoms and molecules and break chemical bonds. This is an important distinction due to the large difference in harmfulness to living organisms.A common source of ionizing radiation is radioactive materials that emit α, β, or γ radiation, consisting of helium nuclei, electrons or positrons, and photons, respectively.</div>
</div>
<button onclick="myMove3(12)" id="pbtn" class="btn btn-success">Previous</button>
<button onclick="myMove2(12)" id="obtn" class="btn btn-success">Next</button><br><br>
</div>
<div class="body1">
<div class="heading">Air Pressure</div>
<div class="sec2">
<img src="images/airpressure.gif" class="giphy" style="float:right"/>
<div class="desc">The force exerted by air,weather compressed or unconfined,on any surface in contact with it.Atmospheric pressure, also known as barometric pressure (after the barometer), is the pressure within the atmosphere of Earth. The standard atmosphere (symbol: atm) is a unit of pressure defined as 101,325 Pa (1,013.25 hPa; 1,013.25 mbar), which is equivalent to 760 mm Hg, 29.9212 inches Hg, or 14.696 psi.[1] The atm unit is roughly equivalent to the mean sea-level atmospheric pressure on Earth, that is, the Earth's atmospheric pressure at sea level is approximately 1 atm. </div>
</div>
<button onclick="myMove3(13)" id="pbtn" class="btn btn-success">Previous</button>
<button onclick="myMove2(13)" id="obtn" class="btn btn-success">Next</button><br><br>
</div>
<div class="body1">
<div class="heading">Precipitation</div>
<div class="sec2">
<img src="images/precipitation.gif" class="giphy" style="float:right"/>
<div class="desc">Precipitation is any product for the condensation of atmospheric watervapour that falls under gravity from clouds.In meteorology, precipitation is any product of the condensation of atmospheric water vapor that falls under gravity from clouds.[2] The main forms of precipitation include drizzle, rain, sleet, snow, ice pellets, graupel and hail. Precipitation occurs when a portion of the atmosphere becomes saturated with water vapor (reaching 100% relative humidity), so that the water condenses and "precipitates". Thus, fog and mist are not precipitation but colloids, because the water vapor does not condense sufficiently to precipitate.</div>
</div>
<button onclick="myMove3(14)" id="pbtn" class="btn btn-success">Previous</button>
<button onclick="myMove2(14)" id="obtn" class="btn btn-success">Next</button><br><br>
</div>
<div class="body1">
<div class="heading">Condensation</div>
<div class="sec2">
<img src="images/condensation.gif" class="giphy" style="float:right"/>
<div class="desc">Condensation is the process by which watervapour in air is changed into liquid water.Condensation is the change of the physical state of matter from the gas phase into the liquid phase, and is the reverse of vaporization. The word most often refers to the water cycle.[1] It can also be defined as the change in the state of water vapor to liquid water when in contact with a liquid or solid surface or cloud condensation nuclei within the atmosphere. When the transition happens from the gaseous phase into the solid phase directly, the change is called deposition. </div>
</div>
<button onclick="myMove3(15)" id="pbtn" class="btn btn-success">Previous</button>
<button onclick="myMove2(15)" id="obtn" class="btn btn-success">Next</button><br><br>
</div>
<div class="body1">
<div class="heading">Cloud cover</div>
<div class="sec2">
<img src="images/cloud.gif" class="giphy" style="float:right"/>
<div class="desc">It describes the extent of cover by clouds in portion of sky visible from the observation point.Cloud cover (also known as cloudiness, cloudage, or cloud amount) refers to the fraction of the sky obscured by clouds when observed from a particular location.[1] Okta is the usual unit of measurement of the cloud cover. The cloud cover is correlated to the sunshine duration as the least cloudy locales are the sunniest ones while the cloudiest areas are the least sunny places.The global cloud cover averages around 0.68 when analyzing clouds with optical depth larger than 0.1. This value is lower (0.56) when considering clouds with an optical depth larger than 2, and higher when counting subvisible cirrus clouds.</div>
</div>
<button onclick="myMove3(16)" id="pbtn" class="btn btn-success">Previous</button>
<button onclick="myMove2(16)" id="obtn" class="btn btn-success">Next</button><br><br>
</div>
<div class="body1">
<div class="subheading">Multiple Choice Question and Answers</div>
<div class="sec" style="display:block">
1.)Which of the following briefly describes the desert climate?
<img src="images/smiley1.jpg" class="smileys"></img>
<form>
<input type="radio" name="q1" oninput="check1()">Hot and humid</input><br>
<input type="radio" name="q1" oninput="check1()">Dry and humid</input><br>
<input type="radio" name="q1" oninput="check1()">Hot and dry</input><br>
<input type="radio" name="q1" oninput="check1()">Hot and wet</input>
<p class="democheck">All the best..</p>
</form>
</div>
<div class="sec">
2.)The coldest region on the earth is..
<img src="images/smiley1.jpg" class="smileys"></img>
<form>
<input type="radio" name="q2" oninput="check2()">polar region</input><br>
<input type="radio" name="q2" oninput="check2()">tropical region</input><br>
<input type="radio" name="q2" oninput="check2()">temperate region</input><br>
<input type="radio" name="q2" oninput="check2()">coastal region</input>
<p class="democheck">All the best..</p>
</form>
</div>
<div class="sec">
3.)Udometer is also called as?
<img src="images/smiley1.jpg" class="smileys"></img>
<form>
<input type="radio" name="q3" oninput="check3()">Rain Guage</input><br>
<input type="radio" name="q3" oninput="check3()">Anemometer</input><br>
<input type="radio" name="q3" oninput="check3()">thermometer</input><br>
<input type="radio" name="q3" oninput="check3()">pyranometer</input>
<p class="democheck">All the best..</p>
</form>
</div>
<div class="sec">
4.)All changes taking place in the atmosphere are caused by
<img src="images/smiley1.jpg" class="smileys"></img>
<form>
<input type="radio" name="q4" oninput="check4()">Sun</input><br>
<input type="radio" name="q4" oninput="check4()">Moon</input><br>
<input type="radio" name="q4" oninput="check4()">Earth</input><br>
<input type="radio" name="q4" oninput="check4()">Stars</input>
<p class="democheck">All the best..</p>
</form>
</div>
<div class="sec">
<img src="images/smiley1.jpg" class="smileys"></img>
5.)The amount of humidity in the atmosphere is a measure of_____in air
<form>
<input type="radio" name="q5" oninput="check5()">Heat</input><br>
<input type="radio" name="q5" oninput="check5()">Temperature</input><br>
<input type="radio" name="q5" oninput="check5()">Chemicals</input><br>
<input type="radio" name="q5" oninput="check5()">Moisture</input>
<p class="democheck">All the best..</p>
</form>
</div>
<table class="table1">
<caption>You can select question here...</caption>
<tr>
<td>
<div id="a1" style="width:50px" onclick="changeq(1)">!</div>
</td>
<td>
<div id="a1" style="width:50px" onclick="changeq(2)">@</div>
</td>
<td>
<div id="a1" style="width:50px" onclick="changeq(3)">#</div>
</td>
<td>
<div id="a1" style="width:50px" onclick="changeq(4)">$</div>
</td>
<td>
<div id="a1" style="width:50px" onclick="changeq(5)">%</div>
</td>
</tr>
</table>
<button onclick="myMove3(17)" id="pbtn" class="btn btn-success">Previous</button>
<button onclick="myMove2(17)" id="obtn" class="btn btn-success">Next</button><br><br>
</div>
<div class="body1">
<div class="subheading">True or False</div>
<p style="margin-left:5%;text-align:left">Enter T for True and F for False</p>
<div class="sec2">
<form>
<label class="label1">1.)Weather is the state of the atmosphere over a longer period of time.</label>
<div class="torf">(<input type="text" width="10"></input>)</div><br>
<label class="label1">2.)The earth's atmosphere consists mostly of oxygen.</label>
<div class="torf">(<input type="text" width="10"></input>)</div><br>
<label class="label1">3.)Weather is created in the lower part of the atmosphere.</label>
<div class="torf">(<input type="text" width="10"></input>)</div><br>
<label class="label1">4.)There is no difference between a "thundershower" and a "thunderstorm".</label>
<div class="torf">(<input type="text" width="10"></input>)</div><br>
<label class="label1">5.)Warm air can hold more moisture than cold air.</label>
<div class="torf">(<input type="text" width="10"></input>)</div>
</form>
</div>
<div id="a1" style="margin-top:2%" onclick="caltf()">Submit</div>
<p>Pls.. submit your answers before going to next page</p>
<button onclick="myMove3(18)" id="pbtn" class="btn btn-success">Previous</button>
<button onclick="myMove2(18)" id="obtn" class="btn btn-success">Next</button><br><br>
</div>
<div class="body1">
<div class="sec2"><br>
<img src="images/smiley1.jpg" id="smile"></img><br><br>
<p id="marksheet">Pls..goto to previous page and submit your answers</p>
</div>
<button onclick="myMove3(19)" id="pbtn" class="btn btn-success">Previous</button>
<button onclick="myMove2(19)" id="obtn" class="btn btn-success">Next</button><br><br>
</div>
<div class="body1">
<div class="subheading">Match the following</div>
<div class="sec2" style="margin-top:2%">
<form name="matching">
<table width=100%>
<tr>
<td>
<label>1.)Sleet</label>
</td>
<td>
<div class="torf" style="text-align:center">(<input type="text" width="10"></input>)</div><br>
</td>
<td>
<label>a.)Used to measure wind speed</label>
</td>
</tr>
<tr>
<td>
<label>2.)Snovy</label>
</td>
<td>
<div class="torf" style="text-align:center">(<input type="text" width="10"></input>)</div><br>
</td>
<td>
<label>b.)Cloud covering a large part of the sky.</label>
</td>
</tr>
<tr>
<td>
<label>3.)Anemometer</label>
</td>
<td>
<div class="torf" style="text-align:center">(<input type="text" width="10"></input>)</div><br>
</td>
<td>
<label>c.)Rain containing some ice, as when snow melts as it falls.</label>
</td>
</tr>
<tr>
<td>
<label>4.)Overcast</label>
</td>
<td>
<div class="torf" style="text-align:center">(<input type="text" width="10"></input>)</div><br>
</td>
<td>
<label>d.)Used to measure rainfall.</label>
</td>
</tr>
<tr>
<td>
<label>5.)Rain guage</label>
</td>
<td>
<div class="torf" style="text-align:center">(<input type="text" width="10"></input>)</div>
</td>
<td>
<label>e.)Covered with snowfall.</label>
</td>
</tr>
</table>
</form>
</div>
<p>Pls.. submit your answers before going to next page</p>
<div id="a1" style="margin-top:2%" onclick="calmatch()">Submit</div>
<button onclick="myMove3(20)" id="pbtn" class="btn btn-success">Previous</button>
<button onclick="myMove2(20)" id="obtn" class="btn btn-success">Next</button><br><br>
</div>
<div class="body1">
<div class="sec2"><br>
<img src="images/smiley1.jpg" id="smiles"></img><br><br>
<p id="marksheets">Pls..goto to previous page and submit your answers</p>
</div>
<button onclick="myMove3(21)" id="pbtn" class="btn btn-success">Previous</button>
<button onclick="myMove2(21)" id="obtn" class="btn btn-success">Next</button><br><br>
</div>
<div class="body1">
<div class="heading">Identify The Following Images</div>
<div class="container">
<div class="mySlides">
<p class="ps">1 / 6<p>
<img src="images/sunnyweather.png" class="signs">
<div id="a1" onclick="sans1()">Show Answer</div>
<p class="ps" id="ps1"></p>
</div>
<div class="mySlides">
<p class="ps">2 / 6<p>
<img src="images/cloudy.png" class="signs">
<div id="a1" onclick="sans2()">Show Answer</div>
<p class="ps" id="ps2"></p>
</div>
<div class="mySlides">
<p class="ps">3 / 6<p>
<img src="images/stromy.png" class="signs">
<div id="a1" onclick="sans3()">Show Answer</div>
<p class="ps" id="ps3"></p>
</div>
<div class="mySlides">
<p class="ps">4 / 6<p>
<img src="images/windy.png" class="signs">
<div id="a1" onclick="sans4()">Show Answer</div>
<p class="ps" id="ps4"></p>
</div>
<div class="mySlides">
<p class="ps">5 / 6<p>
<img src="images/rainyweather.png" class="signs">
<div id="a1" onclick="sans5()">Show Answer</div>
<p class="ps" id="ps5"></p>
</div>
<div class="mySlides">
<p class="ps">6 / 6<p>
<img src="images/cloudnight.png" class="signs">
<div id="a1" onclick="sans6()">Show Answer</div>
<p class="ps" id="ps6"></p>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<button onclick="myMove3(22)" id="pbtn" class="btn btn-success">Previous</button>
<button onclick="myMove2(22)" id="obtn" class="btn btn-success">Next</button><br><br>
</div>
<div class="body1">
<div class="sec2">
<p style="padding:10px;font-size:100px;">The End</p>
</div>
<button onclick="myMove3(23)" id="obtn" class="btn btn-success">Previous</button>
</div>