Javascript html id's omzetten naar classes svg stoplicht - Softwareontwikkeling

Vraag

dinsdag 12 januari 2021 14:39

Acties:

0 Henk 'm!

Topicstarter

Kan iemand mij helpen met mijn informatica PO, de docent wil niet helpen maar kom echt niet verder.
Inleiding

In Fundament Online heb je de afgelopen tijd kunnen leren over algoritmes, toestandsautomaten, usability, architectuur, stroomschema’s en programmeren. In het verleden heb je al eens een website gemaakt met HTML en CSS. In deze opdracht combineren we al deze kennis en kunde. Het uiteindelijke doel is het maken van een simulatie-omgeving voor een verkeersregeling met stoplichten voor een gelijkvloers verkeersknooppunt. Dat hoeft niet in één keer: de opdracht wordt in een aantal fasen gegeven.

Fase 1: Prototype
In fase 1 ga je een basale verkeerskruising maken, een prototype of Proof of Concept, in HTML, CSS, SVG en JavaScript. De toestandsautomaat hiervoor mag je in deze fase in JavaScript programmeren. Je kunt het geheel dus weergeven in één statische HTML-pagina, die je dus zonder gebruik te maken van een server kunt bouwen, testen en tonen. De interactie met de gebruikers is minimaal: er is een reset-knop en een ‘volgende’-knop.

Er zijn twee verkeersstromen: noord-zuid (en vice versa) en oost-west (en vice versa).

Opdracht
Maak een toestandsdiagram van deze applicatie.
Maak een kruising in HTML/CSS/SVG met daarin minimaal vier verkeerslichten.
De verkeerslichten zijn gegroepeerd in twee groepen: noord-zuid en oost-west. Dit is gelijk aan het aantal verkeersstromen. Er zijn dus geen apart geschakelde voorsorteerstroken.
De knop ‘Reset’ brengt de applicatie naar de begintoestand.
De knop ‘Volgende toestand’ brengt de applicatie naar de volgende toestand volgens de toestandsautomaat.
Maak gebruik van functies, verzamelingen en control-structuren. Het is dus niet toegestaan om te programmeren in de stijl van: verkeerslicht1.lampRood = rood;
verkeerslicht1.lampOranje = grijs;
verkeerslicht1.lampGroen = grijs;
verkeerslicht2.lampRood = grijs;
verkeerslicht2.lampOranje = grijs;
verkeerslicht2.lampGroen = groen;
enz.
Maak een stroomschema van elke functie. Doe dat voordat je deze programmeert.
Let goed op stijl en leesbaarheid. Je programmeert voor en met anderen, niet alleen voor jezelf. Gebruik commentaar waar nodig.
Maak gebruik van ‘stapsgewijze verfijning’ om onafhankelijke taken te maken en verdeel deze binnen je groepje.

Code:

<html>
<head>
<title>
</title>

<script>
var fase = 0;
var toestand =
</script>
</head>
<body>

<img width="100%">

<svg

xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="205.61905mm"
height="205.61905mm"
viewBox="0 0 205.61905 205.61905"
version="1.1"
id="svg8"
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
sodipodi:docname="verkeerslicht.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.0641544"
inkscape:cx="388.57143"
inkscape:cy="388.57143"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
inkscape:document-rotation="0"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1017"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Laag 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-4.5357208,-21.922617)">
<rect
style="fill:#666666;stroke-width:0.264583"
id="rect10"
width="41.577381"
height="205.61905"
x="85.422623"
y="21.922617" />
<rect
style="fill:#666666;stroke-width:0.264583"
id="rect10-4"
width="41.577381"
height="205.61905"
x="101.67559"
y="-210.15477"
transform="rotate(90)" />
<rect
style="fill:#ffffff;stroke-width:0.264583"
id="rect29"
width="0.99452984"
height="8.9507685"
x="105.72913"
y="24.657574" />
<rect
style="fill:#ffffff;stroke-width:0.264583"
id="rect33"
width="0.99452984"
height="8.702136"
x="105.72913"
y="38.580994" />
<rect
style="fill:#ffffff;stroke-width:0.264583"
id="rect33-2"
width="0.99452984"
height="8.702137"
x="105.72913"
y="52.380096" />
<rect
style="fill:#ffffff;stroke-width:0.252989"
id="rect33-5"
width="0.99452984"
height="7.9562397"
x="105.97777"
y="66.054878" />
<rect
style="fill:#ffffff;stroke-width:0.264583"
id="rect33-7"
width="0.99452984"
height="8.702137"
x="106.2264"
y="79.481033" />
<rect
style="fill:#ffffff;stroke-width:0.264583"
id="rect33-75"
width="0.99452984"
height="8.702137"
x="106.47502"
y="93.404449" />
<rect
style="fill:#ffffff;stroke-width:0.264583"
id="rect33-3"
width="0.99452984"
height="8.702137"
x="105.72913"
y="143.37958" />
<rect
style="fill:#ffffff;stroke-width:0.264583"
id="rect33-24"
width="0.99452984"
height="8.702137"
x="105.72913"
y="158.54616" />
<rect
style="fill:#ffffff;stroke-width:0.264583"
id="rect33-59"
width="0.99452984"
height="8.702137"
x="105.97777"
y="172.71822" />
<rect
style="fill:#ffffff;stroke-width:0.264583"
id="rect33-9"
width="0.99452984"
height="8.702137"
x="105.97777"
y="187.38753" />
<rect
style="fill:#ffffff;stroke-width:0.264583"
id="rect33-1"
width="0.99452984"
height="8.702137"
x="105.97777"
y="201.31093" />
<rect
style="fill:#ffffff;stroke-width:0.264583"
id="rect33-26"
width="0.99452984"
height="8.702137"
x="105.97776"
y="215.73161" />
<rect
style="fill:#ffffff;stroke-width:0.264583"
id="rect33-0"
width="0.99452984"
height="8.702137"
x="121.87288"
y="-16.097134"
transform="rotate(90)" />
<rect
style="fill:#ffffff;stroke-width:0.264583"
id="rect33-0-4"
width="0.99452984"
height="8.702137"
x="121.62424"
y="-31.015078"
transform="rotate(90)" />
<rect
style="fill:#ffffff;stroke-width:0.264583"
id="rect33-0-1"
width="0.99452984"
height="8.702137"
x="121.87286"
y="-45.43576"
transform="rotate(90)" />
<rect
style="fill:#ffffff;stroke-width:0.264583"
id="rect33-0-5"
width="0.99452984"
height="8.702137"
x="121.87287"
y="-60.35371"
transform="rotate(90)" />
<rect
style="fill:#ffffff;stroke-width:0.264583"
id="rect33-0-6"
width="0.99452984"
height="8.702137"
x="122.1215"
y="-75.27166"
transform="rotate(90)" />
<rect
style="fill:#ffffff;stroke-width:0.179428"
id="rect33-0-7"
width="0.99452984"
height="4.0020833"
x="122.12151"
y="-84.992287"
transform="rotate(90)" />
<rect
style="fill:#ffffff;stroke-width:0.264583"
id="rect33-0-0"
width="0.99452984"
height="8.702137"
x="122.86739"
y="-145.63466"
transform="rotate(90)" />
<rect
style="fill:#ffffff;stroke-width:0.264583"
id="rect33-0-8"
width="0.99452984"
height="8.702137"
x="122.61877"
y="-159.8067"
transform="rotate(90)" />
<rect
style="fill:#ffffff;stroke-width:0.264003"
id="rect33-0-53"
width="0.99017471"
height="8.702137"
x="122.62312"
y="-176.7137"
transform="rotate(90)" />
<rect
style="fill:#ffffff;stroke-width:0.264583"
id="rect33-0-2"
width="0.99452984"
height="8.702137"
x="122.8674"
y="-191.88028"
transform="rotate(90)" />
<rect
style="fill:#ffffff;stroke-width:0.264583"
id="rect33-0-23"
width="0.99452984"
height="8.702137"
x="122.61877"
y="-207.2955"
transform="rotate(90)" />
<rect
style="fill:#ffffff;stroke-width:0.200006"
id="rect33-0-88"
width="0.99452984"
height="4.9726501"
x="122.86739"
y="-131.71124"
transform="rotate(90)" />

<rect
style="fill:#ffffff;stroke-width:0.264583"
id="rect314"
width="22.128281"
height="1.6161194"
x="106.72366"
y="144.9957" />
<rect
style="fill:#ffffff;stroke-width:0.271914"
id="rect314-8"
width="23.371443"
height="1.6161194"
x="83.47654"
y="98.501419" />
<rect
style="fill:#ffffff;stroke-width:0.271914"
id="rect314-3"
width="23.371443"
height="1.6161194"
x="100.36617"
y="-130.34375"
transform="rotate(90)" />
<rect
style="fill:#ffffff;stroke-width:0.264583"
id="rect314-3-5"
width="22.128281"
height="1.6161194"
x="122.7431"
y="-83.476532"
transform="rotate(90)" />

//basis stoplichten
<rect
style="fill:#333333;stroke-width:0.30059"
id="rect207"
width="9.6966686"
height="27.598207"
x="128.85194"
y="144.9957" />

<rect
style="fill:#333333;stroke-width:0.30059"
id="rect207-0"
width="9.6966686"
height="27.598209"
x="73.779869"
y="72.519325" />

<rect
style="fill:#333333;stroke-width:0.30059"
id="rect207-7"
width="9.6966686"
height="27.598209"
x="144.87138"
y="-83.476532"
transform="rotate(90)" />

<rect
style="fill:#333333;stroke-width:0.30059"
id="rect207-7-8"
width="9.6966686"
height="27.598211"
x="90.669495"
y="-156.32584"
transform="rotate(90)" />
//lampen
//de oranje lampen van noord en zuid
<g id = "nz">
<circle class ="oranje"
style="stroke-width:0.264583"
id="zuidOranje"
cx="133.82462"
cy="158.67047"
r="3.7294872" />

<circle class ="oranje"
style="stroke-width:0.264583"
id="noordOranje"
cx="78.752541"
cy="86.194099"
r="3.7294872" />

// de groene lampen noord-zuid

<circle class ="groen"
style="stroke-width:0.264583"
id="zuidGroen"
cx="133.8246"
cy="167.62125"
r="3.7294872" />
<circle class ="groen"
style="stroke-width:0.264583"
id="noordGroen"
cx="78.752525"
cy="77.491966"
r="3.7294872" />
//de rode lampen noord-zuid

<circle class ="rood"
style="stroke-width:0.264583"
id="zuidRood"
cx="133.8246"
cy="149.96834"
r="3.7294872" />

<circle class ="rood"
style="stroke-width:0.264583"
id="noordRood"
cx="78.752525"
cy="95.144875"
r="3.7294872" />
</g>
//lampen oostwest
<g id = "ow">
//oost west oranje
<circle class ="oranje"
style="stroke-width:0.264583"
id="path216-5-05"
cx="149.59538"
cy="-69.801765"
r="3.7294872"
transform="rotate(90)" />

<circle class ="oranje"
style="stroke-width:0.264583"
id="path216-5-05-0"
cx="95.393494"
cy="-142.65108"
r="3.7294872"
transform="rotate(90)" />

//groen oost west
<circle class="groen"
style="stroke-width:0.264583"
id="path216-1-5"
cx="149.59538"
cy="-61.348248"
r="3.7294872"
transform="rotate(90)" />

<circle class="groen"
style="stroke-width:0.264583"
id="path216-5-9-8-9"
cx="95.393494"
cy="-151.10457"
r="3.7294872"
transform="rotate(90)" />

//oost west rood
<circle class="rood"
style="stroke-width:0.264583"
id="path216-5-9-8"
cx="149.59538"
cy="-78.255257"
r="3.7294872"
transform="rotate(90)"
/>

<circle class ="rood"
style="stroke-width:0.264583"
id="path216-1-5-1"
cx="95.393494"
cy="-134.19756"
r="3.7294872"
transform="rotate(90)" />
</g>

</g>
</svg>

</img>

<script>

// Functie voor de eerste knop
function functieKnop1(){

if (fase == 0){
document.getElementById("nzRood").style.fill = "#000000";
document.getElementById("nzOranje").style.fill = "#000000";
document.getElementById("nzGroen").style.fill = "#00ff00";
document.getElementById("owRood").style.fill = "#ff0000";
document.getElementById("owOranje").style.fill = "#000000";
document.getElementById("owGroen").style.fill = "#000000";
}
if (fase == 1){
document.getElementById("nzRood").style.fill = "#000000";
document.getElementById("nzOranje").style.fill = "#ff6600";
document.getElementById("nzGroen").style.fill = "#000000";
document.getElementById("owRood").style.fill = "#ff0000";
document.getElementById("owOranje").style.fill = "#000000";
document.getElementById("owGroen").style.fill = "#000000";
}
if (fase == 2){
document.getElementById("nzRood").style.fill = "#ff0000";
document.getElementById("nzOranje").style.fill = "#000000";
document.getElementById("nzGroen").style.fill = "#0000000";
document.getElementById("owRood").style.fill = "#ff0000";
document.getElementById("owOranje").style.fill = "#000000";
document.getElementById("owGroen").style.fill = "#000000";
}
if (fase == 3){
document.getElementById("nzRood").style.fill = "#ff0000";
document.getElementById("nzOranje").style.fill = "#000000";
document.getElementById("nzGroen").style.fill = "#000000";
document.getElementById("owRood").style.fill = "#000000";
document.getElementById("owOranje").style.fill = "#000000";
document.getElementById("owGroen").style.fill = "#00ff00";
}
if (fase == 4){
document.getElementById("nzRood").style.fill = "#ff0000";
document.getElementById("nzOranje").style.fill = "#000000";
document.getElementById("nzGroen").style.fill = "#000000";
document.getElementById("owRood").style.fill = "#000000";
document.getElementById("owOranje").style.fill = "#ff6600";
document.getElementById("owGroen").style.fill = "#000000";
}
if (fase == 5){
document.getElementById("nzRood").style.fill = "#ff0000";
document.getElementById("nzOranje").style.fill = "#000000";
document.getElementById("nzGroen").style.fill = "#0000000";
document.getElementById("owRood").style.fill = "#ff0000";
document.getElementById("owOranje").style.fill = "#000000";
document.getElementById("owGroen").style.fill = "#000000";
}
fase = fase + 1;
if (fase >= 6){
fase = 0 ;
}
}

// Functie voor de resetknop
function functieKnop2(){
fase = 0;
document.getElementById("nzRood").style.fill = "#999999";
document.getElementById("nzOranje").style.fill = "#999999";
document.getElementById("nzGroen").style.fill = "#999999";
document.getElementById("owRood").style.fill = "#999999";
document.getElementById("owOranje").style.fill = "#999999";
document.getElementById("owGroen").style.fill = "#999999";
}

</script>

<button onclick="functieKnop1()">Volgende Fase</button>

<button onclick="functieKnop2()">Reset</button>

</body>

</html>

Ik moet deze stoplichten laten werken in classes maar snap echt niet hoe dat moet. Het mag iet in alle unieke ids.

Kan iemand mij alsjeblieft helpen? Ik ben radeloos

Alle reacties

dinsdag 12 januari 2021 14:46

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Uh, nee, dit is niet hoe de Devschuur® werkt. "Snap niet hoe" en "Kom er niet uit" kunnen wij ook niets mee. Ik stel voor dat je onze Quickstart leest en dan een nieuw topic probeert. Als je code post, gebruik dan code tags en plaats dan alleen relevante(!) stukken(!) code a.u.b. (dat is dus, zeg, een handvol tot, 20, uiterlijk 30, 40 regels code, zéker geen 500+).

Die vragen die er staan wanneer je hier een nieuw topic opent staan er ook niet voor niks:

Mijn vraag
...

Relevante software en hardware die ik gebruik
...

Wat ik al gevonden of geprobeerd heb
...

[ Voor 32% gewijzigd door RobIII op 12-01-2021 14:48 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Dit topic is gesloten.