mirror of
https://github.com/EthanPisani/ethanpisani.com.git
synced 2025-07-02 18:15:18 -04:00
chem12cpt
This commit is contained in:
parent
9d264f2c64
commit
e7514e7c8c
@ -73,3 +73,11 @@ body::-webkit-scrollbar- {
|
||||
both;
|
||||
animation: text-pop-up-top 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
}
|
||||
|
||||
|
||||
iframe{
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
|
||||
}
|
||||
36
index.html
36
index.html
@ -16,5 +16,41 @@
|
||||
<div class="content">
|
||||
<h1 class="text-pop-up-top">Ethan Pisani.</h1>
|
||||
</div>
|
||||
<div>
|
||||
<iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
|
||||
</div>
|
||||
<div>
|
||||
<iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
|
||||
</div>
|
||||
<div>
|
||||
<iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
|
||||
</div>
|
||||
<div>
|
||||
<iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
|
||||
</div>
|
||||
<div>
|
||||
<iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
|
||||
</div>
|
||||
<div>
|
||||
<iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
|
||||
</div>
|
||||
<div>
|
||||
<iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
|
||||
</div>
|
||||
<div>
|
||||
<iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
|
||||
</div>
|
||||
<div>
|
||||
<iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
|
||||
</div>
|
||||
<div>
|
||||
<iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
|
||||
</div>
|
||||
<div>
|
||||
<iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
|
||||
</div>
|
||||
<div>
|
||||
<iframe src="./threejs-test" height="200" width="300" title="Iframe Example"></iframe>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
38464
js/three.js
Normal file
38464
js/three.js
Normal file
File diff suppressed because one or more lines are too long
224
main.py
Normal file
224
main.py
Normal file
@ -0,0 +1,224 @@
|
||||
from flask import Flask, render_template, request
|
||||
import random
|
||||
|
||||
from flask.helpers import url_for
|
||||
app = Flask(__name__)
|
||||
"""
|
||||
2-bromobutane
|
||||
benzene
|
||||
butane
|
||||
ethanal
|
||||
ethanoic_acid
|
||||
hex-3-yne
|
||||
1-methoxypropane
|
||||
n-methylbutan-2-amine
|
||||
n_n-dimethylpropanamide
|
||||
pent-2-ene
|
||||
pentan-2-one
|
||||
propan-2-ol
|
||||
propyl_ethanoate
|
||||
|
||||
|
||||
"""
|
||||
|
||||
frontlist=[
|
||||
|
||||
'Aristotle',
|
||||
|
||||
'Democritus (300 B.C)',
|
||||
|
||||
'All matter made up of tiny particles (atoms)',
|
||||
|
||||
'Thomson Model of the Atom',
|
||||
|
||||
'Calculate relative charge and mass of the electron',
|
||||
|
||||
'Ernest Rutherford (1911)',
|
||||
|
||||
'Proved the existence of the neutron',
|
||||
|
||||
'Neils Bohr',
|
||||
|
||||
'Quantum Hypothesis made to explain observations',
|
||||
|
||||
'The energy of the photon is transferred to the electron',
|
||||
|
||||
'Energy level must be filled before moving up next level',
|
||||
|
||||
'Pauli Exclusion Principle',
|
||||
|
||||
'Hund’s Rule',
|
||||
|
||||
'Ionic Compounds',
|
||||
|
||||
'Molecular Compounds',
|
||||
|
||||
'What type of bond? ΔEN = 0.2',
|
||||
|
||||
'What type of bond? ΔEN = 1.9'
|
||||
]
|
||||
|
||||
backlist=[
|
||||
|
||||
'Only four elements earth, air, fire and water',
|
||||
|
||||
'Atoms are made of tiny, indivisible things',
|
||||
|
||||
'Dalton’s Atomic Theory',
|
||||
|
||||
'Electrons could be emitted from matter',
|
||||
|
||||
'Robert Millikan (1909)',
|
||||
|
||||
'Discovered atom is mostly empty space',
|
||||
|
||||
'James Chadwick (1932)',
|
||||
|
||||
'The Planetary Model',
|
||||
|
||||
'Max Planck (1900)',
|
||||
|
||||
'Einstein (1905)',
|
||||
|
||||
'Aufbau Principle',
|
||||
|
||||
'No 2 e- in an atom can have 4 quantum numbers, on 2 e- can exist per orbital',
|
||||
|
||||
'1 e- is placed in each suborbital',
|
||||
|
||||
'Made of ionic bonds, usually between metals and nonmetals, bonded in a crystal lattice structure, EN >= 1.7',
|
||||
|
||||
'Covalent bonds between 2 nonmetals, EN = 0 to 0.5 is nonpolar',
|
||||
|
||||
'Non-polar bond',
|
||||
|
||||
'Polar bond'
|
||||
|
||||
]
|
||||
|
||||
correct='<div class="answer"><h1 class="c">✓</h1><p class="c">Correct!</p><p>Your answer:</p><p>'
|
||||
incorrect='<div class="answer"><h1 class="x">✗</h1><p class="x">Incorrect!</p><p>Your answer:</p><p>'
|
||||
style='<style>input{display:none;}.hide{display:none;}</style>'
|
||||
answerdict={
|
||||
'in1.1':'</p><hr/> <p>Correct answer:</p><table class="hct"> <tr> <th>System</th> <th>Surrounding</th> </tr><tr> <td>Metal</td><td>Water</td></tr><tr> <td>m=300g</td><td>m=500g</td></tr><tr> <td>c=?</td><td>c=4.184 J/g°C</td></tr><tr><td>T<sub>1</sub>=915°C</td><td>T<sub>1</sub>=21.5°C</td></tr><tr><td>T<sub>2</sub>=74.6°C</td><td>T <sub>2</sub>=74.6°C</td></tr><tr><td>𝚫T=-840.4°C</td><td>𝚫T=+53.1°C</td></tr></table><div><p>Q=mcT</p><p>Q=(500g)(4.184 J/g°C)(53.1°C)</p><p>Q<sub>water</sub>=111,085.2 J</p><p>Q<sub>metal</sub>=-111,085.2 J</p><p>c=-111,085.2J / (300g)(-840.4°C)</p><p>c=0.44060447 J/g°C</p><p>c=0.4406 J/g°C</p></div></div>',
|
||||
'in1.2':'</p><hr/> <p>Correct answer:</p><table class="hct"> <tr> <th>Substance</th> <th>Heat Capacity</th> </tr><tr style="background-color: #6cb400"> <td>Iron</td><td>0.440</td></tr><tr> <td>Lithium</td><td>3.56</td></tr><tr> <td>Sodium</td><td>1.23</td></tr><tr> <td>Aluminum</td><td>0.900</td></tr><tr> <td>Potassium</td><td>0.75</td></tr><tr> <td>Lead</td><td>0.160</td></tr><tr> <td>Gold</td><td>0.1290</td></tr></table> <p>Iron is most likely</p></div>',
|
||||
'in2.1':'</p><hr/> <p>Correct answer:</p><p> 2C<sub>6</sub>H<sub>14</sub> + 19O<sub>2</sub> → 12CO<sub >2</sub > + 14H<sub>2</sub>O </p></div>',
|
||||
'in2.2':'</p><hr/> <p>Correct answer:</p><p> ΔH=∑[(n)(ΔH<sub>f</sub> Products)] - ∑[(n)(ΔH<sub>f</sub> Reactants)] </p><p> ΔH=[(12 mol)(ΔH<sub>f</sub> CO<sub>2</sub>) + (14 mol)(ΔH<sub >f</sub > H<sub>2</sub>O)] - [(2 mol)(ΔH<sub>f</sub> C<sub>6</sub>H<sub>14</sub>) + (19 mol)(ΔH<sub>f</sub> O<sub>2</sub>)] </p><p> ΔH=[(12 mol)(-393.5 kJ/mol) + (14 mol)(-285.8 kJ/mol)] - [(2 mol)(-198.67 kJ/mol) + <s>(19 mol)(0 kJ/mol)</s>] </p><p>ΔH=[-8723.2 kJ] - [-397.34 kJ]</p><p>ΔH=-8325.86 kJ</p></div>',
|
||||
'in2.3':'</p><hr/> <p>Correct answer:</p><p>ΔH=(n)(ΔH<sub>x</sub>)</p><p>ΔH<sub>x</sub>=-8325.86 kJ / 2 mol</p><p>ΔH<sub>x</sub>=-4162.93 kJ/mol</p></div>',
|
||||
'in3.1':'</p><hr/> <p>Correct answer:</p><p>ΔS=∑[(n)(ΔS Products)] - ∑[(n)(ΔS Reactants)]</p><p> ΔS=[(2 mol)(ΔS LiOH) + (1 mol)(ΔS H<sub>2</sub>)] - [(2 mol)(ΔS Li) + (2 mol)(ΔS H<sub>2</sub>O)] </p><p>ΔS=[(2 mol)(47.97 J/mol*K) + (1 mol)(130.6 J/mol*K)] - [(2 mol)(ΔS 29.09 J/mol*K) + (2 mol)(69.95 J/mol*K)]</p><p>ΔS=[226.54 J/mol*K] - [198.08 J/mol*K]</p><p>ΔS=28.46 J/mol*K</p></div>',
|
||||
'in3.2':'</p><hr/> <p>Correct answer:</p><p>Yes, because the ΔS is positive</p></div>'
|
||||
}
|
||||
|
||||
@app.route("/")
|
||||
def home():
|
||||
return render_template("main.html")
|
||||
|
||||
@app.route("/chem12cpt/")
|
||||
def chem12cpt():
|
||||
return render_template("chem12cpt.html")
|
||||
|
||||
#UNITS
|
||||
@app.route("/chem12cpt/unit1/")
|
||||
def unit1():
|
||||
return render_template("unit1.html")
|
||||
|
||||
@app.route("/chem12cpt/unit2/")
|
||||
def unit2():
|
||||
f = '<p>ftest</p><p>test</p>'
|
||||
b = '<p>btest</p><p>test</p>'
|
||||
r = random.randint(0, len(frontlist)-1)
|
||||
return render_template("card.html", front=f"<p>{frontlist[r]}</p>", back=f"<p>{backlist[r]}</p>")
|
||||
|
||||
|
||||
|
||||
@app.route("/chem12cpt/unit3/", methods=["POST","GET"])
|
||||
def unit3():
|
||||
if request.method == "POST":
|
||||
in11 = request.form['in1.1']
|
||||
in12 = request.form['in1.2']
|
||||
in211 = request.form['in2.1.1']
|
||||
in212 = request.form['in2.1.2']
|
||||
in213 = request.form['in2.1.3']
|
||||
in214 = request.form['in2.1.4']
|
||||
in22 = request.form['in2.2']
|
||||
in23 = request.form['in2.3']
|
||||
in31 = request.form['in3.1']
|
||||
in32 = request.form['in3.2']
|
||||
print(in11)
|
||||
print(in211)
|
||||
"""
|
||||
for key in a_dict:
|
||||
print(key)
|
||||
"""
|
||||
|
||||
indic={}
|
||||
try:
|
||||
if float(in11) > 0.43 and float(in11) < 0.45:
|
||||
print("correct")
|
||||
indic['in1.1']=f"{correct}{in11}{answerdict['in1.1']}"
|
||||
else:
|
||||
indic['in1.1']=f"{incorrect}{in11}{answerdict['in1.1']}"
|
||||
except:
|
||||
indic['in1.1']=f"{incorrect}{in11}{answerdict['in1.1']}"
|
||||
|
||||
try:
|
||||
if in12.lower() == 'iron':
|
||||
indic['in1.2']=f"{correct}{in12}{answerdict['in1.2']}"
|
||||
else:
|
||||
indic['in1.2']=f"{incorrect}{in12}{answerdict['in1.2']}"
|
||||
except:
|
||||
indic['in1.2']=f"{incorrect}{in12}{answerdict['in1.2']}"
|
||||
|
||||
try:
|
||||
if in211=='2C6H14' and in212=='19O2' and in213=='12CO2' and in214=='14H2O' or in211=='2C6H14' and in212=='19O2' and in213=='14H2O' and in214=='12CO2':
|
||||
indic['in2.1']=f"{correct}{in211} + {in212} → {in213}+ {in214}{answerdict['in2.1']}"
|
||||
else:
|
||||
indic['in2.1']=f"{incorrect}{in211} + {in212} → {in213} + {in214}{answerdict['in2.1']}"
|
||||
except:
|
||||
indic['in2.1']=f"{incorrect}{in211} + {in212} → {in213} + {in214}{answerdict['in2.1']}"
|
||||
|
||||
try:
|
||||
if float(in22) > -8400 and float(in22) < -8300:
|
||||
indic['in2.2']=f"{correct}{in22} kJ{answerdict['in2.2']}"
|
||||
else:
|
||||
indic['in2.2']=f"{incorrect}{in22} kJ{answerdict['in2.2']}"
|
||||
except:
|
||||
indic['in2.2']=f"{incorrect}{in22} kJ{answerdict['in2.2']}"
|
||||
try:
|
||||
if float(in23) > -4200 and float(in23) < -4100:
|
||||
indic['in2.3']=f"{correct}{in23} kJ/mol{answerdict['in2.3']}"
|
||||
else:
|
||||
indic['in2.3']=f"{incorrect}{in23} kJ/mol{answerdict['in2.3']}"
|
||||
except:
|
||||
indic['in2.3']=f"{incorrect}{in23} kJ/mol{answerdict['in2.3']}"
|
||||
try:
|
||||
if float(in31) > 27 and float(in31) < 29:
|
||||
indic['in3.1']=f"{correct}{in31} J/mol*K{answerdict['in3.1']}"
|
||||
else:
|
||||
indic['in3.1']=f"{incorrect}{in31} J/mol*K{answerdict['in3.1']}"
|
||||
except:
|
||||
indic['in3.1']=f"{incorrect}{in31} J/mol*K{answerdict['in3.1']}"
|
||||
try:
|
||||
if in32.lower() == 'yes':
|
||||
indic['in3.2']=f"{correct}{in32}{answerdict['in3.2']}"
|
||||
else:
|
||||
indic['in3.2']=f"{incorrect}{in32}{answerdict['in3.2']}"
|
||||
except:
|
||||
indic['in3.2']=f"{incorrect}{in32}{answerdict['in3.2']}"
|
||||
#print(in11)
|
||||
print(in12)
|
||||
return render_template("unit3.html", style=style, testa=indic)
|
||||
return render_template("unit3.html")
|
||||
|
||||
@app.route("/chem12cpt/unit4/")
|
||||
def unit4():
|
||||
return render_template("unit4.html")
|
||||
|
||||
|
||||
|
||||
@app.route("/3d/<model>/")
|
||||
def model(model):
|
||||
return render_template("model.html", model=model)
|
||||
|
||||
if __name__ == "__main__":
|
||||
app.run(host="0.0.0.0", debug=False, port=80)
|
||||
72
static/css/card.css
Normal file
72
static/css/card.css
Normal file
@ -0,0 +1,72 @@
|
||||
|
||||
body {
|
||||
font-size: 3em;
|
||||
background-color: #2c2c2c;
|
||||
font-family: "Roboto", sans-serif;
|
||||
margin: auto;
|
||||
margin-top: 5vh;
|
||||
text-align: center;
|
||||
}
|
||||
a{
|
||||
background-color: #535353;
|
||||
|
||||
border: none;
|
||||
border-radius: 0.5em;
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.scene {
|
||||
width: 50vw;
|
||||
height: 50vh;
|
||||
margin: auto;
|
||||
perspective: 70vh;
|
||||
padding-bottom: 5vh;
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
cursor: pointer;
|
||||
transform-style: preserve-3d;
|
||||
transform-origin: center right;
|
||||
transition: transform 0.7s;
|
||||
}
|
||||
|
||||
.card.is-flipped {
|
||||
transform: rotateX(-180deg);
|
||||
}
|
||||
.cardtext{
|
||||
padding-left: 20%;
|
||||
padding-right: 20%;
|
||||
padding-top: 10%;
|
||||
}
|
||||
.card__face {
|
||||
border-radius: 75px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 40px;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.refresh{
|
||||
border: #229100;
|
||||
border-radius: 75px;
|
||||
}
|
||||
.card__face--front {
|
||||
background: #229100;
|
||||
|
||||
}
|
||||
|
||||
.card__face--back {
|
||||
background: black;
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
59
static/css/chem12cpt.css
Normal file
59
static/css/chem12cpt.css
Normal file
@ -0,0 +1,59 @@
|
||||
body {
|
||||
font-size: 1em;
|
||||
background-color: #2c2c2c;
|
||||
font-family: "Roboto", sans-serif;
|
||||
margin: auto;
|
||||
/* margin-top: 30vh;*/
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
background-color: #202324;
|
||||
color: #aba499;
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: #181a1b;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #535353;
|
||||
}
|
||||
p.links {
|
||||
color: #229100;
|
||||
}
|
||||
button {
|
||||
background-color: #229100;
|
||||
border: none;
|
||||
border-radius: 0.5em;
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
border-radius: 0.5em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
border-radius: 2em;
|
||||
padding: 2em;
|
||||
width: 30%;
|
||||
margin-bottom: 2em;
|
||||
margin: auto;
|
||||
margin-top:0;
|
||||
overflow: hidden; /* add this to contain floated children */
|
||||
}
|
||||
.first {
|
||||
width: 50%;
|
||||
|
||||
float: left; /* add this */
|
||||
}
|
||||
.second {
|
||||
width: 50%;
|
||||
|
||||
float: right; /* add this */
|
||||
}
|
||||
257
static/css/main.css
Normal file
257
static/css/main.css
Normal file
@ -0,0 +1,257 @@
|
||||
body {
|
||||
font-size: 3em;
|
||||
background-color: #2c2c2c;
|
||||
font-family: "Roboto", sans-serif;
|
||||
margin: auto;
|
||||
margin-top: 30vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a{
|
||||
background-color: #535353;
|
||||
|
||||
border: none;
|
||||
border-radius: 0.5em;
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
h1 {
|
||||
color: #229100;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/** UNDERLINE
|
||||
:root {
|
||||
--mainColor: #00b1c9;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
background:
|
||||
linear-gradient(
|
||||
to bottom, var(--mainColor) 0%,
|
||||
var(--mainColor) 100%
|
||||
);
|
||||
font-weight: bold;
|
||||
background-position: 0 100%;
|
||||
background-repeat: repeat-x;
|
||||
background-size: 4px 4px;
|
||||
text-decoration: none;
|
||||
transition: background-size .2s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-size: 4px 50px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
* ----------------------------------------
|
||||
* animation text-pop-up-top
|
||||
* ----------------------------------------
|
||||
*/
|
||||
|
||||
/* DARW BOX #243754
|
||||
<div class="wrapper">
|
||||
<span class="square">
|
||||
<a class="tenth before after" href="#">Chem 12 CPT</a>
|
||||
</span>
|
||||
</div>
|
||||
.wrapper{
|
||||
margin:3em 0;
|
||||
}
|
||||
a,a:visited,a:hover,a:active{
|
||||
-webkit-backface-visibility:hidden;
|
||||
backface-visibility:hidden;
|
||||
position:relative;
|
||||
transition:0.5s color ease;
|
||||
text-decoration:none;
|
||||
color:#229100;
|
||||
font-size:2.5em;
|
||||
}
|
||||
a:hover{
|
||||
color:#40e7e7;
|
||||
}
|
||||
a.before:before,a.after:after{
|
||||
content: "";
|
||||
transition:0.5s all ease;
|
||||
-webkit-backface-visibility:hidden;
|
||||
backface-visibility:hidden;
|
||||
position:absolute;
|
||||
}
|
||||
a.before:before{
|
||||
top:-0.25em;
|
||||
}
|
||||
a.after:after{
|
||||
bottom:-0.25em;
|
||||
}
|
||||
a.before:before,a.after:after{
|
||||
height:5px;
|
||||
height:0.35rem;
|
||||
width:0;
|
||||
background:#40e7e7;
|
||||
}
|
||||
a.first:after{
|
||||
left:0;
|
||||
}
|
||||
a.second:after{
|
||||
right:0;
|
||||
}
|
||||
a.third:after,a.sixth:before,a.sixth:after{
|
||||
left:50%;
|
||||
-webkit-transform:translateX(-50%);
|
||||
transform:translateX(-50%);
|
||||
}
|
||||
a.fourth:before,a.fourth:after{
|
||||
left:0;
|
||||
}
|
||||
a.fifth:before,a.fifth:after{
|
||||
right:0;
|
||||
}
|
||||
a.seventh:before{
|
||||
right:0;
|
||||
}
|
||||
a.seventh:after{
|
||||
left:0;
|
||||
}
|
||||
a.eigth:before{
|
||||
left:0;
|
||||
}
|
||||
a.eigth:after{
|
||||
right:0;
|
||||
}
|
||||
a.before:hover:before,a.after:hover:after{
|
||||
width:100%;
|
||||
}
|
||||
.square{
|
||||
box-sizing:border-box;
|
||||
margin-left:-0.4em;
|
||||
position:relative;
|
||||
font-size:1em;
|
||||
overflow:hidden;
|
||||
}
|
||||
.square a{
|
||||
position:static;
|
||||
font-size:100%;
|
||||
padding:0.2em 0.4em;
|
||||
}
|
||||
.square:before,.square:after{
|
||||
content: "";
|
||||
box-sizing:border-box;
|
||||
transition:0.25s all ease;
|
||||
-webkit-backface-visibility:hidden;
|
||||
backface-visibility:hidden;
|
||||
position:absolute;
|
||||
width:5px;
|
||||
width:0.35rem;
|
||||
height:0;
|
||||
background:#40e7e7;
|
||||
}
|
||||
.square:before{
|
||||
left:0;
|
||||
bottom:-0.2em;
|
||||
}
|
||||
.square.individual:before{
|
||||
transition-delay:0.6s;
|
||||
}
|
||||
.square:after{
|
||||
right:0;
|
||||
top:-0.2em;
|
||||
}
|
||||
.square.individual:after{
|
||||
transition-delay:0.2s;
|
||||
}
|
||||
.square a:before{
|
||||
left:0;
|
||||
transition:0.25s all ease;
|
||||
}
|
||||
.square a:after{
|
||||
right:0;
|
||||
transition:0.25s all ease;
|
||||
}
|
||||
.square.individual a:after{
|
||||
transition:0.25s all ease 0.4s;
|
||||
}
|
||||
.square:hover:before,.square:hover:after{
|
||||
height:calc(100% + 0.4em);
|
||||
}
|
||||
.square:hover a:before,.square:hover a:after{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
body::-webkit-scrollbar- {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------
|
||||
* Generated by Animista on 2020-12-31 16:52:43
|
||||
* Licensed under FreeBSD License.
|
||||
* See http://animista.net/license for more info.
|
||||
* w: http://animista.net, t: @cssanimista
|
||||
* ---------------------------------------------- */
|
||||
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* animation text-pop-up-top
|
||||
* ----------------------------------------
|
||||
*/
|
||||
@-webkit-keyframes text-pop-up-top {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
text-shadow: none;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(-50px);
|
||||
transform: translateY(-50px);
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
text-shadow: 0 1px 0 #229100, 0 2px 0 #229100, 0 3px 0 #229100,
|
||||
0 4px 0 #229100, 0 5px 0 #229100, 0 6px 0 #229100, 0 7px 0 #229100,
|
||||
0 8px 0 #229100, 0 9px 0 #229100, 0 50px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
@keyframes text-pop-up-top {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
text-shadow: none;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(-50px);
|
||||
transform: translateY(-50px);
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
text-shadow: 0 1px 0 #229100, 0 2px 0 #229100, 0 3px 0 #229100,
|
||||
0 4px 0 #229100, 0 5px 0 #229100, 0 6px 0 #229100, 0 7px 0 #229100,
|
||||
0 8px 0 #229100, 0 9px 0 #229100, 0 50px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.text-pop-up-top {
|
||||
-webkit-animation: text-pop-up-top 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
|
||||
both;
|
||||
animation: text-pop-up-top 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
}
|
||||
|
||||
|
||||
iframe{
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
|
||||
}
|
||||
93
static/css/unit1.css
Normal file
93
static/css/unit1.css
Normal file
@ -0,0 +1,93 @@
|
||||
a {
|
||||
color: #229100;
|
||||
}
|
||||
a.button{
|
||||
background-color: #535353;
|
||||
|
||||
border: none;
|
||||
border-radius: 0.5em;
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
iframe {
|
||||
border-radius: 10px;
|
||||
border-color: #229100;
|
||||
width: 100%;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
border-color: #229100;
|
||||
}
|
||||
.hide{
|
||||
display: none;
|
||||
}
|
||||
.t{
|
||||
color: #fff;
|
||||
}
|
||||
.wrapper {
|
||||
border-radius: 2em;
|
||||
padding: 2em;
|
||||
background: #535353;
|
||||
margin-bottom: 2em;
|
||||
width: 55%;
|
||||
height: 30vh;
|
||||
margin: auto;
|
||||
overflow: hidden; /* add this to contain floated children */
|
||||
}
|
||||
.first {
|
||||
width: 59%;
|
||||
height: inherit;
|
||||
float: left; /* add this */
|
||||
}
|
||||
.second {
|
||||
width: 40%;
|
||||
height: inherit;
|
||||
float: right; /* add this */
|
||||
}
|
||||
|
||||
/** Switch
|
||||
-------------------------------------*/
|
||||
|
||||
.switch input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Adjust this to size
|
||||
*/
|
||||
|
||||
.switch {
|
||||
display: inline-block;
|
||||
font-size: 20px; /* 1 */
|
||||
height: 1em;
|
||||
width: 2em;
|
||||
background: #bdb9a6;
|
||||
border-radius: 1em;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.switch div {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
border-radius: 1em;
|
||||
background: #fff;
|
||||
box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.3);
|
||||
-webkit-transition: all 300ms;
|
||||
-moz-transition: all 300ms;
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.switch input:checked + div {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
-moz-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
0
static/css/unit2.css
Normal file
0
static/css/unit2.css
Normal file
98
static/css/unit3.css
Normal file
98
static/css/unit3.css
Normal file
@ -0,0 +1,98 @@
|
||||
.content {
|
||||
width: 40%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
.hct {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
border: #000000;
|
||||
border-style: solid;
|
||||
}
|
||||
.baleq {
|
||||
width: 4em;
|
||||
}
|
||||
h1.c {
|
||||
color: greenyellow;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline;
|
||||
}
|
||||
h1.x {
|
||||
color: red;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
p.c {
|
||||
color: greenyellow;
|
||||
display: inline;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
p.x {
|
||||
color: red;
|
||||
display: inline;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.q1 {
|
||||
border-radius: 2em;
|
||||
padding: 2em;
|
||||
background: #535353;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.q2 {
|
||||
border-radius: 2em;
|
||||
padding: 2em;
|
||||
background: #535353;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.q3 {
|
||||
border-radius: 2em;
|
||||
padding: 2em;
|
||||
background: #535353;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
a.button {
|
||||
background-color: #535353;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
}
|
||||
.subbut {
|
||||
text-align: right;
|
||||
border-radius: 0.5em;
|
||||
font-size:1.4em;
|
||||
cursor: pointer;
|
||||
background-color: #535353;
|
||||
}
|
||||
tr:nth-child(even) {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
tr:nth-child(odd) {
|
||||
background-color: #535353;
|
||||
}
|
||||
input {
|
||||
margin-bottom: 2em;
|
||||
padding: 8px;
|
||||
border: none;
|
||||
border-bottom: 1px solid #2c2c2c;
|
||||
background-color: #2c2c2c;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.answer {
|
||||
padding: 1em;
|
||||
border-radius: 1.5em;
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
60
static/css/unit4.css
Normal file
60
static/css/unit4.css
Normal file
@ -0,0 +1,60 @@
|
||||
.walk {
|
||||
margin: auto;
|
||||
width: 60%;
|
||||
border-radius: 2em;
|
||||
padding: 2em;
|
||||
background: #535353;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
p.quest {
|
||||
margin: auto;
|
||||
width: 60%;
|
||||
}
|
||||
.hl {
|
||||
color: #229100;
|
||||
}
|
||||
.hl2 {
|
||||
color: #229100;
|
||||
}
|
||||
.answer {
|
||||
padding: 1em;
|
||||
border-radius: 1.5em;
|
||||
background-color: #2c2c2c;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wrapper {
|
||||
padding-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
margin: auto;
|
||||
overflow: hidden; /* add this to contain floated children */
|
||||
}
|
||||
.first {
|
||||
width: 50%;
|
||||
float: left; /* add this */
|
||||
text-align: left;
|
||||
}
|
||||
.second {
|
||||
width: 50%;
|
||||
float: right; /* add this */
|
||||
}
|
||||
.ice {
|
||||
margin: auto;
|
||||
}
|
||||
tr:nth-child(even) {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
tr:nth-child(odd) {
|
||||
background-color: #535353;
|
||||
}
|
||||
a.button {
|
||||
background-color: #535353;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
padding: 15px;
|
||||
}
|
||||
.hide{
|
||||
display: none;
|
||||
}
|
||||
.t{
|
||||
color: white;
|
||||
}
|
||||
BIN
static/docs/studyguide.pdf
Normal file
BIN
static/docs/studyguide.pdf
Normal file
Binary file not shown.
BIN
static/img/1-methoxypropane.png
Normal file
BIN
static/img/1-methoxypropane.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
BIN
static/img/benzene.png
Normal file
BIN
static/img/benzene.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
static/img/butane.png
Normal file
BIN
static/img/butane.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
static/img/ethanal.png
Normal file
BIN
static/img/ethanal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
static/img/ethanoic_acid.png
Normal file
BIN
static/img/ethanoic_acid.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 7.2 KiB |
BIN
static/img/hex-3-yne.png
Normal file
BIN
static/img/hex-3-yne.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
static/img/n-methylbutan-2-amine.png
Normal file
BIN
static/img/n-methylbutan-2-amine.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
static/img/n_n-dimethylpropanamide.png
Normal file
BIN
static/img/n_n-dimethylpropanamide.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
static/img/pent-2-ene.png
Normal file
BIN
static/img/pent-2-ene.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
static/img/pentan-2-one.png
Normal file
BIN
static/img/pentan-2-one.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
BIN
static/img/propan-2-ol.png
Normal file
BIN
static/img/propan-2-ol.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
static/img/propyl_ethanoate.png
Normal file
BIN
static/img/propyl_ethanoate.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
static/models/organic/1-methoxypropane.glb
Normal file
BIN
static/models/organic/1-methoxypropane.glb
Normal file
Binary file not shown.
BIN
static/models/organic/2-bromobutane.glb
Normal file
BIN
static/models/organic/2-bromobutane.glb
Normal file
Binary file not shown.
BIN
static/models/organic/benzene.glb
Normal file
BIN
static/models/organic/benzene.glb
Normal file
Binary file not shown.
BIN
static/models/organic/butane.glb
Normal file
BIN
static/models/organic/butane.glb
Normal file
Binary file not shown.
BIN
static/models/organic/ethanal.glb
Normal file
BIN
static/models/organic/ethanal.glb
Normal file
Binary file not shown.
BIN
static/models/organic/ethanoic_acid.glb
Normal file
BIN
static/models/organic/ethanoic_acid.glb
Normal file
Binary file not shown.
BIN
static/models/organic/hex-3-yne.glb
Normal file
BIN
static/models/organic/hex-3-yne.glb
Normal file
Binary file not shown.
BIN
static/models/organic/n-methylbutan-2-amine.glb
Normal file
BIN
static/models/organic/n-methylbutan-2-amine.glb
Normal file
Binary file not shown.
BIN
static/models/organic/n_n-dimethylpropanamide.glb
Normal file
BIN
static/models/organic/n_n-dimethylpropanamide.glb
Normal file
Binary file not shown.
BIN
static/models/organic/pent-2-ene.glb
Normal file
BIN
static/models/organic/pent-2-ene.glb
Normal file
Binary file not shown.
BIN
static/models/organic/pentan-2-one.glb
Normal file
BIN
static/models/organic/pentan-2-one.glb
Normal file
Binary file not shown.
BIN
static/models/organic/propan-2-ol.glb
Normal file
BIN
static/models/organic/propan-2-ol.glb
Normal file
Binary file not shown.
BIN
static/models/organic/propyl_ethanoate.glb
Normal file
BIN
static/models/organic/propyl_ethanoate.glb
Normal file
Binary file not shown.
50
templates/card.html
Normal file
50
templates/card.html
Normal file
@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Ethan's Site</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="{{ url_for('static',filename='css/card.css') }}"
|
||||
/>
|
||||
<meta name="msapplication-TileColor" content="#000000" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="{{ url_for('static',filename='css/chem12cpt.css') }}"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
href="{{ url_for('static',filename='img/favicon.ico') }}"
|
||||
/>
|
||||
<meta name="robots" content="index,follow" />
|
||||
</head>
|
||||
<body>
|
||||
<h3>Click card to flip.</h3>
|
||||
<div class="scene scene--card">
|
||||
<div class="card">
|
||||
<div class="card__face card__face--front">
|
||||
<div class="cardtext">{{ front|safe }}</div>
|
||||
</div>
|
||||
<div class="card__face card__face--back">
|
||||
<div class="cardtext">{{ back|safe }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="../" class="button">Go Back</a>
|
||||
<a onClick="window.location.reload()" class="button">Next</a>
|
||||
|
||||
<style></style>
|
||||
<script>
|
||||
var card = document.querySelector(".card");
|
||||
card.addEventListener("click", function () {
|
||||
card.classList.toggle("is-flipped");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
52
templates/chem12cpt.html
Normal file
52
templates/chem12cpt.html
Normal file
@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Ethan's Site</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="{{ url_for('static',filename='css/chem12cpt.css') }}"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="{{ url_for('static',filename='css/main.css') }}"
|
||||
/>
|
||||
<meta name="msapplication-TileColor" content="#000000" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link
|
||||
rel="icon"
|
||||
href="{{ url_for('static',filename='img/favicon.ico') }}"
|
||||
/>
|
||||
<meta name="robots" content="index,follow" />
|
||||
</head>
|
||||
<body style="margin-top: 1vh">
|
||||
<div>
|
||||
<h1>Chemistry 12 CPT</h1>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<a href="{{ url_for('static',filename='docs/studyguide.pdf') }}"
|
||||
>Study Guide Units 1,2,3,4</a
|
||||
>
|
||||
</p>
|
||||
<p class="links">Creative components:</p>
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p><a href="./unit1">Unit 1</a></p>
|
||||
|
||||
<p><a href="./unit2">Unit 2</a></p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<p><a href="./unit3">Unit 3</a></p>
|
||||
|
||||
<p><a href="./unit4">Unit 4</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
26
templates/main.html
Normal file
26
templates/main.html
Normal file
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Redzuzu's Site</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/main.css') }}" />
|
||||
<meta name="msapplication-TileColor" content="#000000" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link rel="icon" href="{{ url_for('static',filename='img/favicon.ico') }}" />
|
||||
<meta name="robots" content="index,follow" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 class="text-pop-up-top">Ethan Pisani.</h1>
|
||||
<a href="/chem12cpt/">Chemistry 12 CPT</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
99
templates/model.html
Normal file
99
templates/model.html
Normal file
@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>{{model}} Model</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
canvas{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script type="module">
|
||||
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/build/three.module.js';
|
||||
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/examples/jsm/controls/OrbitControls.js';
|
||||
import {GLTFLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/examples/jsm/loaders/GLTFLoader.js';
|
||||
let camera, scene, renderer;
|
||||
|
||||
init();
|
||||
render();
|
||||
|
||||
function init() {
|
||||
|
||||
const container = document.createElement( 'div' );
|
||||
document.body.appendChild( container );
|
||||
|
||||
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
|
||||
//camera.position.set( - 1.8, 0.6, 2.7 );
|
||||
|
||||
scene = new THREE.Scene();
|
||||
|
||||
const loader = new GLTFLoader().setPath('../../static/models/organic/' );
|
||||
var obj;
|
||||
//loader.load( 'propan-2-ol.glb', function ( gltf ) {
|
||||
loader.load( '{{model}}.glb', function ( gltf ) {
|
||||
//loader.load( 'Box.gltf', function ( gltf ) {
|
||||
obj = gltf.scene;
|
||||
scene.add( gltf.scene );
|
||||
|
||||
|
||||
render();
|
||||
|
||||
} );
|
||||
var light = new THREE.HemisphereLight(0xffffff, 0x000000, 1.5)
|
||||
scene.add(light);
|
||||
camera.position.set(0, 0, 10)
|
||||
scene.background = new THREE.Color(0x2c2c2c)
|
||||
//Object.rotation.y += 0.01;
|
||||
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
||||
renderer.setPixelRatio( window.devicePixelRatio );
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
container.appendChild( renderer.domElement );
|
||||
window.addEventListener( 'resize', onWindowResize );
|
||||
|
||||
function animate(){
|
||||
requestAnimationFrame(animate);
|
||||
obj.rotation.y +=0.01;
|
||||
obj.rotation.x +=0.01;
|
||||
obj.rotation.z +=0.01;
|
||||
render();
|
||||
}
|
||||
animate();
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
|
||||
render();
|
||||
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
function render() {
|
||||
|
||||
renderer.render( scene, camera );
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
270
templates/unit1.html
Normal file
270
templates/unit1.html
Normal file
@ -0,0 +1,270 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Ethan's Site</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="{{ url_for('static',filename='css/chem12cpt.css') }}"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="{{ url_for('static',filename='css/unit1.css') }}"
|
||||
/>
|
||||
<meta name="msapplication-TileColor" content="#000000" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link
|
||||
rel="icon"
|
||||
href="{{ url_for('static',filename='img/favicon.ico') }}"
|
||||
/>
|
||||
<meta name="robots" content="index,follow" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1>Chemistry 12 CPT</h1>
|
||||
|
||||
<a href="../" class="button">Go Back</a>
|
||||
<br />
|
||||
<br />
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Alkane:</p>
|
||||
<p>Any hydrocarbon with only single bonds</p>
|
||||
<p>Example: <a href="../../3d/butane">butane</a></p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<iframe
|
||||
loading="lazy"
|
||||
src="../../3d/pent-2-ene"
|
||||
title="butane"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Alkene:</p>
|
||||
<p>Any hydrocarbon with double bonds</p>
|
||||
<p>Example: <a href="../../3d/pent-2-ene">pent-2-ene</a></p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<iframe
|
||||
loading="lazy"
|
||||
src="../../3d/pent-2-ene"
|
||||
title="butane"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Alkyne:</p>
|
||||
<p>Any hydrocarbon with triple bonds</p>
|
||||
<p>Example: <a href="../../3d/hex-3-yne">hex-3-yne</a></p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<iframe
|
||||
loading="lazy"
|
||||
src="../../3d/hex-3-yne"
|
||||
title="butane"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Aromatic:</p>
|
||||
<p>
|
||||
Any hydrocarbon that contains benzene or benzene like properties
|
||||
</p>
|
||||
<p>Example: <a href="../../3d/benzene">benzene</a></p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<iframe
|
||||
loading="lazy"
|
||||
src="../../3d/benzene"
|
||||
title="benzene"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Alcohol:</p>
|
||||
<p>A hydrocarbon with a main hydroxyl (OH) branch</p>
|
||||
<p>Example: <a href="../../3d/propan-2-ol">propan-2-ol</a></p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<iframe
|
||||
loading="lazy"
|
||||
src="../../3d/propan-2-ol"
|
||||
title="propan-2-ol"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Aldehyde:</p>
|
||||
<p>
|
||||
A hydrocarbon with double bonded oxygen (=O), single bonded hydrogen
|
||||
(H)
|
||||
</p>
|
||||
<p>Example: <a href="../../3d/ethanal">ethanal</a></p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<iframe
|
||||
loading="lazy"
|
||||
src="../../3d/ethanal"
|
||||
title="ethanal"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Ether:</p>
|
||||
<p>A hydrocarbon with an oxygen (O) between two alkyl groups</p>
|
||||
<p>
|
||||
Example: <a href="../../3d/1-methoxypropane">1-methoxypropane</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<iframe
|
||||
loading="lazy"
|
||||
src="../../3d/1-methoxypropane"
|
||||
title="1-methoxypropane"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Carboxylic acid:</p>
|
||||
<p>
|
||||
A hydrocarbon with a carboxyl group (C(=O)OH) attached to an alkyl
|
||||
groups
|
||||
</p>
|
||||
<p>Example: <a href="../../3d/ethanoic_acid">ethanoic acid</a></p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<iframe
|
||||
loading="lazy"
|
||||
src="../../3d/ethanoic_acid"
|
||||
title="ethanoic_acid"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Ketone:</p>
|
||||
<p>
|
||||
A hydrocarbon with a double bonded oxygen (C=O) attached to two
|
||||
alkyl groups
|
||||
</p>
|
||||
<p>Example: <a href="../../3d/pentan-2-one">pentan-2-one</a></p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<iframe
|
||||
loading="lazy"
|
||||
src="../../3d/pentan-2-one"
|
||||
title="pentan-2-one"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Ester:</p>
|
||||
<p>
|
||||
A hydrocarbon with a double bonded oxygen and a single bonded oxygen
|
||||
(O-C=O) attached to two alkyl groups
|
||||
</p>
|
||||
<p>
|
||||
Example: <a href="../../3d/propyl_ethanoate">propyl ethanoate</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<iframe
|
||||
loading="lazy"
|
||||
src="../../3d/propyl_ethanoate"
|
||||
title="propyl_ethanoate"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Amine:</p>
|
||||
<p>
|
||||
A hydrocarbon with a bonded nitrogen (N) attached to 1 to 3 alkyl
|
||||
groups
|
||||
</p>
|
||||
<p>
|
||||
Example:
|
||||
<a href="../../3d/n-methylbutan-2-amine">n-methylbutan-2-amine</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<iframe
|
||||
loading="lazy"
|
||||
src="../../3d/n-methylbutan-2-amine"
|
||||
title="n-methylbutan-2-amine"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Aminde:</p>
|
||||
<p>
|
||||
A hydrocarbon with a bonded nitrogen with a double bonded oxygen
|
||||
(N-C=O) attached to 1 to 3 alkyl groups
|
||||
</p>
|
||||
<p>
|
||||
Example:
|
||||
<a href="../../3d/n_n-dimethylpropanamide"
|
||||
>n,n-dimethylpropanamide</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<iframe
|
||||
loading="lazy"
|
||||
src="../../3d/n_n-dimethylpropanamide"
|
||||
title="n_n-dimethylpropanamide"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
function checkf() {
|
||||
var checkb = document.getElementById("checkbox");
|
||||
if (checkb.checked == true) {
|
||||
console.log("checked");
|
||||
var list = document.getElementsByClassName("t");
|
||||
console.log(list);
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
var e = list[i];
|
||||
e.className = "hide";
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
370
templates/unit1copyimg.html
Normal file
370
templates/unit1copyimg.html
Normal file
@ -0,0 +1,370 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Ethan's Site</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="{{ url_for('static',filename='css/chem12cpt.css') }}"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="{{ url_for('static',filename='css/unit1.css') }}"
|
||||
/>
|
||||
<meta name="msapplication-TileColor" content="#000000" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link
|
||||
rel="icon"
|
||||
href="{{ url_for('static',filename='img/favicon.ico') }}"
|
||||
/>
|
||||
<meta name="robots" content="index,follow" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1>Chemistry 12 CPT</h1>
|
||||
|
||||
<div class="container">
|
||||
<label class="switch"
|
||||
><input type="checkbox" id="checkbox" onchange="checkf()" />
|
||||
<div></div> </label
|
||||
>3d models
|
||||
</div>
|
||||
<br />
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Alkane:</p>
|
||||
<p>Any hydrocarbon with only single bonds</p>
|
||||
<p>Example: <a href="../../3d/butane">butane</a></p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<img
|
||||
class="t"
|
||||
id="1"
|
||||
src="../../static/img/butane.png"
|
||||
alt="butane"
|
||||
/>
|
||||
<iframe
|
||||
class="hide"
|
||||
id="if"
|
||||
loading="lazy"
|
||||
src="../../3d/pent-2-ene"
|
||||
title="butane"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Alkene:</p>
|
||||
<p>Any hydrocarbon with double bonds</p>
|
||||
<p>Example: <a href="../../3d/pent-2-ene">pent-2-ene</a></p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<img
|
||||
class="t"
|
||||
id="2"
|
||||
src="../../static/img/pent-2-ene.png"
|
||||
alt="pent-2-ene"
|
||||
/>
|
||||
<iframe
|
||||
class="hide"
|
||||
id="if"
|
||||
loading="lazy"
|
||||
src="../../3d/pent-2-ene"
|
||||
title="butane"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Alkyne:</p>
|
||||
<p>Any hydrocarbon with triple bonds</p>
|
||||
<p>Example: <a href="../../3d/hex-3-yne">hex-3-yne</a></p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<img
|
||||
class="t"
|
||||
id="im"
|
||||
src="../../static/img/hex-3-yne.png"
|
||||
alt="hex-3-yne"
|
||||
/>
|
||||
<iframe
|
||||
class="hide"
|
||||
id="if"
|
||||
loading="lazy"
|
||||
src="../../3d/hex-3-yne"
|
||||
title="butane"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Aromatic:</p>
|
||||
<p>
|
||||
Any hydrocarbon that contains benzene or benzene like properties
|
||||
</p>
|
||||
<p>Example: <a href="../../3d/benzene">benzene</a></p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<img
|
||||
class="t"
|
||||
id="im"
|
||||
src="../../static/img/benzene.png"
|
||||
alt="benzene"
|
||||
/>
|
||||
<iframe
|
||||
class="hide"
|
||||
id="if"
|
||||
loading="lazy"
|
||||
src="../../3d/benzene"
|
||||
title="benzene"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Alcohol:</p>
|
||||
<p>A hydrocarbon with a main hydroxyl (OH) branch</p>
|
||||
<p>Example: <a href="../../3d/propan-2-ol">propan-2-ol</a></p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<img
|
||||
class="t"
|
||||
id="im"
|
||||
src="../../static/img/propan-2-ol.png"
|
||||
alt="propan-2-ol"
|
||||
/>
|
||||
<iframe
|
||||
class="hide"
|
||||
id="if"
|
||||
loading="lazy"
|
||||
src="../../3d/propan-2-ol"
|
||||
title="propan-2-ol"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Aldehyde:</p>
|
||||
<p>
|
||||
A hydrocarbon with double bonded oxygen (=O), single bonded hydrogen
|
||||
(H)
|
||||
</p>
|
||||
<p>Example: <a href="../../3d/ethanal">ethanal</a></p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<img
|
||||
class="t"
|
||||
id="im"
|
||||
src="../../static/img/ethanal.png"
|
||||
alt="ethanal"
|
||||
/>
|
||||
<iframe
|
||||
class="hide"
|
||||
id="if"
|
||||
loading="lazy"
|
||||
src="../../3d/ethanal"
|
||||
title="ethanal"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Ether:</p>
|
||||
<p>A hydrocarbon with an oxygen (O) between two alkyl groups</p>
|
||||
<p>
|
||||
Example: <a href="../../3d/1-methoxypropane">1-methoxypropane</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<img
|
||||
class="t"
|
||||
id="im"
|
||||
src="../../static/img/1-methoxypropane.png"
|
||||
alt="1-methoxypropane"
|
||||
/>
|
||||
<iframe
|
||||
class="hide"
|
||||
id="if"
|
||||
loading="lazy"
|
||||
src="../../3d/1-methoxypropane"
|
||||
title="1-methoxypropane"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Carboxylic acid:</p>
|
||||
<p>
|
||||
A hydrocarbon with a carboxyl group (C(=O)OH) attached to an alkyl
|
||||
groups
|
||||
</p>
|
||||
<p>Example: <a href="../../3d/ethanoic_acid">ethanoic acid</a></p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<img
|
||||
class="t"
|
||||
id="im"
|
||||
src="../../static/img/ethanoic_acid.png"
|
||||
alt="ethanoic_acid"
|
||||
/>
|
||||
<iframe
|
||||
class="hide"
|
||||
id="if"
|
||||
loading="lazy"
|
||||
src="../../3d/ethanoic_acid"
|
||||
title="ethanoic_acid"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Ketone:</p>
|
||||
<p>
|
||||
A hydrocarbon with a double bonded oxygen (C=O) attached to two
|
||||
alkyl groups
|
||||
</p>
|
||||
<p>Example: <a href="../../3d/pentan-2-one">pentan-2-one</a></p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<img
|
||||
class="t"
|
||||
id="im"
|
||||
src="../../static/img/pentan-2-one.png"
|
||||
alt="pentan-2-one"
|
||||
/>
|
||||
<iframe
|
||||
class="hide"
|
||||
id="if"
|
||||
loading="lazy"
|
||||
src="../../3d/pentan-2-one"
|
||||
title="pentan-2-one"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Ester:</p>
|
||||
<p>
|
||||
A hydrocarbon with a double bonded oxygen and a single bonded oxygen
|
||||
(O-C=O) attached to two alkyl groups
|
||||
</p>
|
||||
<p>
|
||||
Example: <a href="../../3d/propyl_ethanoate">propyl ethanoate</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<img
|
||||
class="t"
|
||||
id="im"
|
||||
src="../../static/img/propyl_ethanoate.png"
|
||||
alt="propyl_ethanoate"
|
||||
/>
|
||||
<iframe
|
||||
class="hide"
|
||||
id="if"
|
||||
loading="lazy"
|
||||
src="../../3d/propyl_ethanoate"
|
||||
title="propyl_ethanoate"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Amine:</p>
|
||||
<p>
|
||||
A hydrocarbon with a bonded nitrogen (N) attached to 1 to 3 alkyl
|
||||
groups
|
||||
</p>
|
||||
<p>
|
||||
Example:
|
||||
<a href="../../3d/n-methylbutan-2-amine">n-methylbutan-2-amine</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<img
|
||||
class="t"
|
||||
id="im"
|
||||
src="../../static/img/n-methylbutan-2-amine.png"
|
||||
alt="n-methylbutan-2-amine"
|
||||
/>
|
||||
<iframe
|
||||
class="hide"
|
||||
id="if"
|
||||
loading="lazy"
|
||||
src="../../3d/n-methylbutan-2-amine"
|
||||
title="n-methylbutan-2-amine"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>Aminde:</p>
|
||||
<p>
|
||||
A hydrocarbon with a bonded nitrogen with a double bonded oxygen
|
||||
(N-C=O) attached to 1 to 3 alkyl groups
|
||||
</p>
|
||||
<p>
|
||||
Example:
|
||||
<a href="../../3d/n_n-dimethylpropanamide"
|
||||
>n,n-dimethylpropanamide</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<img
|
||||
class="t"
|
||||
id="im"
|
||||
src="../../static/img/n_n-dimethylpropanamide.png"
|
||||
alt="n_n-dimethylpropanamide"
|
||||
/>
|
||||
<iframe
|
||||
class="hide"
|
||||
id="if"
|
||||
loading="lazy"
|
||||
src="../../3d/n_n-dimethylpropanamide"
|
||||
title="n_n-dimethylpropanamide"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
function checkf() {
|
||||
var checkb = document.getElementById("checkbox");
|
||||
if (checkb.checked == true) {
|
||||
console.log("checked");
|
||||
var list = document.getElementsByClassName("t");
|
||||
console.log(list);
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
var e = list[i];
|
||||
e.className = "hide";
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
17
templates/unit2.html
Normal file
17
templates/unit2.html
Normal file
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Ethan's Site</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/chem12cpt.css') }}" />
|
||||
<meta name="msapplication-TileColor" content="#000000" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link rel="icon" href="/img/favicon.ico" />
|
||||
<meta name="robots" content="index,follow" />
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
218
templates/unit3.html
Normal file
218
templates/unit3.html
Normal file
@ -0,0 +1,218 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Ethan's Site</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="{{ url_for('static',filename='css/chem12cpt.css') }}"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="{{ url_for('static',filename='css/unit3.css') }}"
|
||||
/>
|
||||
<meta name="msapplication-TileColor" content="#000000" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link
|
||||
rel="icon"
|
||||
href="{{ url_for('static',filename='img/favicon.ico') }}"
|
||||
/>
|
||||
<meta name="robots" content="index,follow" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="quest">
|
||||
<h1 class="title ">Unit 3 Quiz</h1>
|
||||
<form method="POST" action="">
|
||||
|
||||
<div class="q1">
|
||||
<h4>Q.1</h4>
|
||||
<p>
|
||||
300g of an unkown metal at 400°C is dropped into 500mL of water at
|
||||
21.5°C. The water is heated up to 74.6°C, what is the heat
|
||||
capacity of the metal?
|
||||
</p>
|
||||
<table class="hct">
|
||||
<tr>
|
||||
<th>Substance</th>
|
||||
<th>Heat Capacity</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Iron</td>
|
||||
<td>0.440</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lithium</td>
|
||||
<td>3.56</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sodium</td>
|
||||
<td>1.23</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Aluminum</td>
|
||||
<td>0.900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Potassium</td>
|
||||
<td>0.75</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lead</td>
|
||||
<td>0.160</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gold</td>
|
||||
<td>0.1290</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr />
|
||||
<p>1.1: Please put answers with 4 sig digs (No UNITS)</p>
|
||||
<input name="in1.1" type="text" placeholder="Ex. 0.8000" />
|
||||
{% if testa %}
|
||||
{{testa['in1.1']|safe}}
|
||||
{% endif%}
|
||||
<hr />
|
||||
<p>1.2: Based on the chart, what metal is it likely to be (Just the metal)?</p>
|
||||
<input name="in1.2" type="text" placeholder="Ex. Copper" />
|
||||
{% if testa %}
|
||||
{{testa['in1.2']|safe}}
|
||||
{% endif%}
|
||||
|
||||
</div>
|
||||
<div class="q2">
|
||||
<h4>Q.2</h4>
|
||||
<p>Hexane combusts completely with oxygen gas.</p>
|
||||
<p>2.1: What is the balanced equation (NO fractions)?</p>
|
||||
<p class="hide">
|
||||
<input
|
||||
class="baleq"
|
||||
name="in2.1.1"
|
||||
type="text"
|
||||
placeholder="Ex. 5H2"
|
||||
/>+<input
|
||||
class="baleq"
|
||||
name="in2.1.2"
|
||||
type="text"
|
||||
placeholder="Ex. 5H2"
|
||||
/>--><input
|
||||
class="baleq"
|
||||
name="in2.1.3"
|
||||
type="text"
|
||||
placeholder="Ex. 5H2"
|
||||
/>+<input
|
||||
class="baleq"
|
||||
name="in2.1.4"
|
||||
type="text"
|
||||
placeholder="Ex. 5H2"
|
||||
/>
|
||||
</p>
|
||||
{% if testa %}
|
||||
{{testa['in2.1']|safe}}
|
||||
{% endif%}
|
||||
<hr />
|
||||
<p>2.2: What is the enthalpy change (include +/-)(No UNITS)(4 sig digs)?</p>
|
||||
<table class="hct">
|
||||
<tr>
|
||||
<th>Substance</th>
|
||||
<th>ΔH<sub>f</sub> (kJ/mol)</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>C<sub>6</sub>H<sub>14</sub></td>
|
||||
<td>-198.67</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>O<sub>2</sub></td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>CO<sub>2</sub></td>
|
||||
<td>−393.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>H<sub>2</sub>O</td>
|
||||
<td>-285.8</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
<input name="in2.2" type="text" placeholder="Ex. +800" />
|
||||
{% if testa %}
|
||||
{{testa['in2.2']|safe}}
|
||||
{% endif%}
|
||||
<hr />
|
||||
|
||||
<p>
|
||||
2.3: What is the molar enthalpy change of the hexane (include
|
||||
+/-)(No UNITS)(4 sig digs)?
|
||||
</p>
|
||||
|
||||
<input name="in2.3" type="text" placeholder="Ex. +800" />
|
||||
{% if testa %}
|
||||
{{testa['in2.3']|safe}}
|
||||
{% endif%}
|
||||
|
||||
</div>
|
||||
<div class="q3">
|
||||
<h4>Q.3</h4>
|
||||
<p>3.1: What is the ΔS of this reaction?</p>
|
||||
<p>
|
||||
2Li<sub>(s)</sub> + 2H<sub>2</sub>O<sub>(l)</sub> = 2LiOH<sub
|
||||
>(aq)</sub
|
||||
>
|
||||
+ H<sub>2(g)</sub>
|
||||
</p>
|
||||
<table class="hct">
|
||||
<tr>
|
||||
<th>Chemical</th>
|
||||
<th>ΔS (J/mol*K)</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>LiOH</td>
|
||||
<td>47.97</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Li</td>
|
||||
<td>29.09</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>H<sub>2</sub></td>
|
||||
<td>130.6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>H<sub>2</sub>O</td>
|
||||
<td>69.95</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
|
||||
<p>Put answers in 4 sig digs</p>
|
||||
<input name="in3.1" type="text" placeholder="Ex. 800" />
|
||||
{% if testa %}
|
||||
{{testa['in3.1']|safe}}
|
||||
{% endif%}
|
||||
|
||||
|
||||
|
||||
<p>3.2: Is this reaction spontaneous based on entropy alone?</p>
|
||||
|
||||
<input name="in3.2" type="text" placeholder="Ex. Yes/No" />
|
||||
{% if testa %}
|
||||
{{testa['in3.2']|safe}}
|
||||
{% endif%}
|
||||
|
||||
</div>
|
||||
<input class="subbut" value="submit" type="submit" />
|
||||
</form>
|
||||
</div>
|
||||
<a href="../" class="button">Go Back</a>
|
||||
</div>
|
||||
|
||||
|
||||
{{style|safe}}
|
||||
</body>
|
||||
</html>
|
||||
225
templates/unit4.html
Normal file
225
templates/unit4.html
Normal file
@ -0,0 +1,225 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Ethan's Site</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="{{ url_for('static',filename='css/chem12cpt.css') }}"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="{{ url_for('static',filename='css/unit4.css') }}"
|
||||
/>
|
||||
<meta name="msapplication-TileColor" content="#000000" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link
|
||||
rel="icon"
|
||||
href="{{ url_for('static',filename='img/favicon.ico') }}"
|
||||
/>
|
||||
<meta name="robots" content="index,follow" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1>Unit 4 Approxmation Rule Walkthrough</h1>
|
||||
<div class="walk">
|
||||
<p class="quest">
|
||||
Initially 4.00 mol of carbon monoxide and 3.00 mol of bromine gas are
|
||||
placed into a 2.5 L container, what is the concentration of the
|
||||
reactants and Carbonyl bromide at equilibrium?
|
||||
</p>
|
||||
<p class="quest" id="inputText">K<sub>eq</sub> = 4.5x10<sup>-5</sup></p>
|
||||
<br />
|
||||
<button><a href="">Reset</a></button>
|
||||
<button class="prevb" onclick="prev()">Previous</button>
|
||||
<button class="nextb" onclick="next()">Next</button>
|
||||
<button onclick="showall()">Show All</button>
|
||||
<br />
|
||||
<br />
|
||||
<div class="answer">
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p id="q1" class="hl2">1. Find chemical equation</p>
|
||||
<p id="q2" class="hide">2. Balance chemical equation</p>
|
||||
<p id="q3" class="hide">3. Make ICE table</p>
|
||||
<p id="q4" class="hide">4. Fill in ICE table</p>
|
||||
<p id="q5" class="hide">
|
||||
5. Is this question an approximation rule (more than 1000x
|
||||
difference)?
|
||||
</p>
|
||||
<p id="q6" class="hide">
|
||||
6. Write keq equation with products and reactants
|
||||
</p>
|
||||
<p id="q7" class="hide">
|
||||
7. Cross out x for reactants because we can assume that the
|
||||
initial concentration of the reactants will be very similar to
|
||||
the concentration at equilibrium
|
||||
</p>
|
||||
<p id="q8" class="hide">8. Solve for x</p>
|
||||
<p id="q9" class="hide">
|
||||
9. Use x to solve for each chemical’s equilibrium concentration
|
||||
</p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<p id="w1" class="hl">
|
||||
CO<sub>(g)</sub> + Br<sub>2(g)</sub> ⇌ COBr<sub>2(g)</sub>
|
||||
</p>
|
||||
<p id="w2" class="hide">
|
||||
1CO<sub>(g)</sub> + 1Br<sub>2(g)</sub> ⇌ 1COBr<sub>2(g)</sub>
|
||||
</p>
|
||||
<div id="w3" class="hide">
|
||||
<table class="ice">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>CO(g)</td>
|
||||
<td>Br2(g)</td>
|
||||
<td>COBr2(g)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>I</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>C</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>E</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div id="w4" class="hide">
|
||||
<table class="ice">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>CO(g)</td>
|
||||
<td>Br2(g)</td>
|
||||
<td>COBr2(g)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>I</td>
|
||||
<td>1.60 mol/L</td>
|
||||
<td>1.20 mol/L</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>C</td>
|
||||
<td>-x</td>
|
||||
<td>-x</td>
|
||||
<td>+x</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>E</td>
|
||||
<td>1.60 -x</td>
|
||||
<td>1.20 -x</td>
|
||||
<td>x</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<p id="w5" class="hide">
|
||||
1.6 / 4.5x10<sup>-5</sup> = 35555.555... ∴ Yes it is more than
|
||||
1000x difference
|
||||
</p>
|
||||
<div id="w6" class="hide">
|
||||
<p>K<sub>eq</sub> = [Products] / [Reactants]</p>
|
||||
<p>
|
||||
K<sub>eq</sub> = [COBr<sub>2(g)</sub>]<sup>1</sup> /
|
||||
[CO<sub>(g)</sub>]<sup>1</sup>[Br<sub>2(g)</sub>]<sup>1</sup>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p id="w7" class="hide">
|
||||
4.5x10<sup>-5</sup> = [x]<sup>1</sup> / [1.60
|
||||
-x]<sup>1</sup>[1.20 -x]<sup>1</sup>
|
||||
</p>
|
||||
<div id="w8" class="hide">
|
||||
<p>4.5x10<sup>-5</sup> = x / (1.60)(1.20)</p>
|
||||
<p>4.5x10<sup>-5</sup> = x / 1.92</p>
|
||||
<p>(4.5x10<sup>-5</sup>)(1.92) = x</p>
|
||||
<p>x = 8.64x10<sup>-5</sup></p>
|
||||
</div>
|
||||
|
||||
<div id="w9" class="hide">
|
||||
<div class="wrapper">
|
||||
<div class="first">
|
||||
<p>[COBr<sub>2(g)</sub>] = x</p>
|
||||
<p>[COBr<sub>2(g)</sub>] = 8.64x10<sup>-5</sup> mol/L</p>
|
||||
<p>[Br<sub>2(g)</sub> ] = 1.20 - x</p>
|
||||
<p>[Br<sub>2(g)</sub> ] = 1.20 -8.64x10<sup>-5</sup></p>
|
||||
<p>[Br<sub>2(g)</sub> ] = 1.19991 mol/L</p>
|
||||
<p>[Br<sub>2(g)</sub> ] = 1.20 mol/L</p>
|
||||
</div>
|
||||
<div class="second">
|
||||
<p>[CO<sub>(g)</sub> ] = 1.60 - x</p>
|
||||
<p>[CO<sub>(g)</sub> ] = 1.60 -8.64x10<sup>-5</sup></p>
|
||||
<p>[CO<sub>(g)</sub> ] = 1.59991 mol/L</p>
|
||||
<p>[CO<sub>(g)</sub> ] = 1.60 mol/L</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p><a href="../" class="button">Go Back</a></p>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
let walkan = ["w1", "w2", "w3", "w4", "w5", "w6", "w7", "w8", "w9"];
|
||||
let walkan2 = ["q1", "q2", "q3", "q4", "q5", "q6", "q7", "q8", "q9"];
|
||||
function highlight(text) {
|
||||
var inputText = document.getElementById("inputText");
|
||||
var innerHTML = inputText.innerHTML;
|
||||
var index = innerHTML.indexOf(text);
|
||||
if (index >= 0) {
|
||||
innerHTML =
|
||||
innerHTML.substring(0, index) +
|
||||
"<span class='highlight'>" +
|
||||
innerHTML.substring(index, index + text.length) +
|
||||
"</span>" +
|
||||
innerHTML.substring(index + text.length);
|
||||
inputText.innerHTML = innerHTML;
|
||||
}
|
||||
}
|
||||
function next() {
|
||||
var x = document.querySelector(".hl");
|
||||
let pos = walkan.indexOf(x.id);
|
||||
if (pos != 8) {
|
||||
document.getElementById(walkan[pos]).className = "";
|
||||
document.getElementById(walkan[pos + 1]).className = "hl";
|
||||
document.getElementById(walkan2[pos]).className = "";
|
||||
document.getElementById(walkan2[pos + 1]).className = "hl2";
|
||||
}
|
||||
}
|
||||
function prev() {
|
||||
var x = document.querySelector(".hl");
|
||||
let pos = walkan.indexOf(x.id);
|
||||
if (pos != 0) {
|
||||
document.getElementById(walkan[pos]).className = "hide";
|
||||
document.getElementById(walkan[pos - 1]).className = "hl";
|
||||
document.getElementById(walkan2[pos]).className = "hide";
|
||||
document.getElementById(walkan2[pos - 1]).className = "hl2";
|
||||
}
|
||||
}
|
||||
function showall() {
|
||||
var arrayLength = walkan.length;
|
||||
for (var i = 0; i < arrayLength; i++) {
|
||||
document.getElementById(walkan[i]).className = "t";
|
||||
document.getElementById(walkan2[i]).className = "t";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
18
threejs-test/example.js
Normal file
18
threejs-test/example.js
Normal file
@ -0,0 +1,18 @@
|
||||
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/build/three.module.js';
|
||||
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/examples/jsm/controls/OrbitControls.js';
|
||||
import {GLTFLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/examples/jsm/loaders/GLTFLoader.js';
|
||||
const loader = new GLTFLoader();
|
||||
const scene = new THREE.Scene();
|
||||
//scene.background = new THREE.Color('black');
|
||||
// Load a glTF resource
|
||||
|
||||
|
||||
|
||||
|
||||
const gltfLoader = new GLTFLoader();
|
||||
gltfLoader.load('../models/organic/propan-2-ol.gltf', (gltf) => {
|
||||
const root = gltf.scene;
|
||||
scene.add(root);
|
||||
gltf.asset;
|
||||
render();
|
||||
});
|
||||
74
threejs-test/help.js
Normal file
74
threejs-test/help.js
Normal file
@ -0,0 +1,74 @@
|
||||
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/build/three.module.js';
|
||||
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/examples/jsm/controls/OrbitControls.js';
|
||||
import {GLTFLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/examples/jsm/loaders/GLTFLoader.js';
|
||||
let camera, scene, renderer;
|
||||
|
||||
init();
|
||||
render();
|
||||
|
||||
function init() {
|
||||
|
||||
const container = document.createElement( 'div' );
|
||||
document.body.appendChild( container );
|
||||
|
||||
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
|
||||
//camera.position.set( - 1.8, 0.6, 2.7 );
|
||||
|
||||
scene = new THREE.Scene();
|
||||
|
||||
const loader = new GLTFLoader().setPath('../models/organic/' );
|
||||
var obj;
|
||||
//loader.load( 'propan-2-ol.glb', function ( gltf ) {
|
||||
loader.load( 'testmolctrlj.glb', function ( gltf ) {
|
||||
//loader.load( 'Box.gltf', function ( gltf ) {
|
||||
obj = gltf.scene;
|
||||
scene.add( gltf.scene );
|
||||
|
||||
|
||||
render();
|
||||
|
||||
} );
|
||||
var light = new THREE.HemisphereLight(0xffffff, 0x000000, 1.5)
|
||||
scene.add(light);
|
||||
camera.position.set(0, 0, 10)
|
||||
scene.background = new THREE.Color(0x2c2c2c)
|
||||
//Object.rotation.y += 0.01;
|
||||
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
||||
renderer.setPixelRatio( window.devicePixelRatio );
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
container.appendChild( renderer.domElement );
|
||||
window.addEventListener( 'resize', onWindowResize );
|
||||
|
||||
function animate(){
|
||||
requestAnimationFrame(animate);
|
||||
obj.rotation.y += 0.005;
|
||||
obj.rotation.z += 0.005;
|
||||
obj.rotation.x += 0.005;
|
||||
renderer.render(scene, camera)
|
||||
}
|
||||
animate();
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function onWindowResize() {
|
||||
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
|
||||
render();
|
||||
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
function render() {
|
||||
|
||||
renderer.render( scene, camera );
|
||||
|
||||
}
|
||||
22
threejs-test/index.html
Normal file
22
threejs-test/index.html
Normal file
@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>My first three.js app</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
canvas{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script type="module" src="./help.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
40
threejs-test/main.js
Normal file
40
threejs-test/main.js
Normal file
@ -0,0 +1,40 @@
|
||||
const scene = new THREE.Scene();
|
||||
|
||||
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
|
||||
const render = new THREE.WebGLRenderer();
|
||||
|
||||
render.setSize(window.innerWidth, window.innerHeight);
|
||||
|
||||
document.body
|
||||
|
||||
|
||||
//
|
||||
loader.load(
|
||||
// resource URL
|
||||
'../models/organic/propan-2-ol.gltf',
|
||||
// called when the resource is loaded
|
||||
function ( gltf ) {
|
||||
|
||||
scene.add( gltf.scene );
|
||||
|
||||
gltf.animations; // Array<THREE.AnimationClip>
|
||||
gltf.scene; // THREE.Group
|
||||
gltf.scenes; // Array<THREE.Group>
|
||||
gltf.cameras; // Array<THREE.Camera>
|
||||
gltf.asset; // Object
|
||||
|
||||
},
|
||||
// called while loading is progressing
|
||||
function ( xhr ) {
|
||||
|
||||
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
|
||||
|
||||
},
|
||||
// called when loading has errors
|
||||
function ( error ) {
|
||||
console.log(error)
|
||||
console.log( 'An error happened' );
|
||||
|
||||
}
|
||||
);
|
||||
Loading…
Reference in New Issue
Block a user