Ocr Computer Science Traffic light

Im late for a deadline for a practical investigation and need to make 2 different Traffic lights in Code Html, javascript and CSS one that works automatically and one that changes colour by using a button tag and onclick events. They also expect us to use variables and true and false statements which i don't understand.
Could someone help me with the task explaining all the features of the tags im using and perhaps examples explained.

Scroll to see replies

Reply 1

username1799249

All the info on HTML you could ever need is here:

http://www.w3schools.com/html/

All tags are here:

http://www.w3schools.com/tags/default.asp

The moral of the story is to start your assignments a bit earlier.

Good luck!

Reply 2

INTit


var lightstates = {red:0,amber:1,green:2};
var currentState = lightstates.green;

var onClick= function(){
changeState();
}

function changeState(){

switch(currentState){
case lightstates.red{
currentState =  lightStates.amber
break;
case lightstates.amber:{
currentState = lightStates.red;
}
}
}

}

Sorry iPads really not suitable for typing code I give up. The code should give you an idea how to do it. It's called a finite state machine the one above is implemented using a switch statement(the most basic way) google it.

You click change whilst it's on green then it turns amber. Click change whilsts it's amber it turns red etc.

I might post a full working example later when I'm on the PC if nobody else does and your still stuck

(edited 8 years ago)

Reply 3

Personinsertname

Original post by INTit


var lightstates = {red:0,amber:1,green:2};
var currentState = lightstates.green;

var onClick= function(){
changeState();
}

function changeState(){

switch(currentState){
case lightstates.red{
currentState =  lighgStates.green;
break;
case lightstates.amber:{
currentState = lightStates.red;
}
}
}

}

Wait so what type of programming language is that?

Reply 4

INTit

JavaScript of course but it's incomplete. I'm guessing you didn't understand it.

(edited 8 years ago)

Reply 5

INTit

Original post by Personinsertname

Wait so what type of programming language is that?

Here you go I finished the full example with Javascript, HTML and CSS. Its the traffic like with a button to change. Happy to answer any questions:

(edited 8 years ago)

Reply 6

Personinsertname

Original post by INTit

Here you go I finished the full example with Javascript, HTML and CSS. Its the traffic like with a button to change. Happy to answer any questions:

HTML


<div class="traffic-light">
  <div class="light off" id="red"></div>
  <div class="light off" id="amber"></div>
  <div class="light off" id="green"></div>
</div>

<button id="changeBtn">Change</button>

CSS


.traffic-light
{
  width:50px;
  height:75px;
  background-color:gray;
}

.light
{
  width:20px;
  height:20px;
  border:1px solid;
  margin-left:auto;
  margin-right:auto;
  border-radius: 50px;
}

.red
{
  background-color:red
}
.amber
{
  background-color:yellow
}
.green
{
  background-color:green;
}
.off
{
  background-color:transparent;
 }

Javascript


var lightStates = {red:0,amber:1,green:2};
var currentState = lightStates.red;

document.getElementById('changeBtn'.onclick=function(){
	changeState();
};


function changeState()
{
	clear();
  switch(currentState)
  {
    case lightStates.red:
    {
      document.getElementById("red".className ="light red";
      currentState =  lightStates.amber;
    }
  	break;
    case lightStates.amber:
    {
      document.getElementById("amber".className ="light amber";
      currentState = lightStates.green;
    } break;
     case lightStates.green:
    {
      document.getElementById("green".className ="light green";
      currentState = lightStates.red;
    } break;
   }
}

function clear(){
   document.getElementById("red".className ="light off";
   document.getElementById("amber".className ="light off";
   document.getElementById("green".className ="light off";
}

You can play with it here:
https://jsfiddle.net/87pjbdyb/1/

Could you please add a function for the traffic light to start automatically, i heard that i had to use set interval , not quite sure if it means automatically as in click on website it works or click on button it cycles.

Reply 7

bigboateng_

Original post by Personinsertname

Just need to add this to the code. setInterval(function, time) will run a function repeatedly for how the amount of seconds you specify.

window.onload = setInterval(changeState, 1000);

Reply 8

Personinsertname

Original post by bigboateng_

Just need to add this to the code. setInterval(function, time) will run a function repeatedly for how the amount of seconds you specify.

window.onload = setInterval(changeState, 1000);

Thanks, still need to work on everything else though gonna be a long night for many nights.

Reply 9

bigboateng_

Original post by Personinsertname

Thanks, still need to work on everything else though gonna be a long night for many nights.

just pm me if you have any extra questions

Reply 10

Personinsertname

Original post by bigboateng_

Just need to add this to the code. setInterval(function, time) will run a function repeatedly for how the amount of seconds you specify.

window.onload = setInterval(changeState, 1000);

Wait how exactly>? Im very new to the topic and don't quite understnad the syntax. Would it be its own function tag or will be part of the html

Reply 11

bigboateng_

Original post by Personinsertname

Wait how exactly>? Im very new to the topic and don't quite understnad the syntax. Would it be its own function tag or will be part of the html

You put this in side of your <script></script> tag. and no it doesnt need to be inside its own function, just write it like that

Reply 12

Personinsertname

Don't you have to link the css and js to html if saved seperately like the jsfiddle above?

Reply 13

Personinsertname

Original post by bigboateng_

You put this in side of your <script></script> tag. and no it doesnt need to be inside its own function, just write it like that

Im doing this in notepad btw and saving each file externally

<div class="traffic-light"> <div class="light off" id="red"></div> <div class="light off" id="amber"></div> <div class="light off" id="green"></div></div><link rel="stylesheet" type="text/css" href="new 2.css"><script src="new 3.js"><button id="changeBtn">Change</button>
Thats how i did it for the button one

Reply 14

Personinsertname

Still doesnt work though

Reply 15

bigboateng_

Original post by Personinsertname

Still doesnt work though

I would put the

<link rel="stylesheet" type="text/css" href="new 2.css"> 
<script src="new 3.js">

in the <head></head> section like this. Also remove the spaces in between the name of the files, so change new 2.css to new2.css, same for the javascript file. so the final head should look like this

<head>
<!-- you put your title here etc, remember to remove spaces in between file names -->
<link rel="stylesheet" type="text/css" href="new2.css"> 
<script type="text/javascript" src="new3.js">
</head>