Red Light Green Light es-419 Explainer

Explicador de Luz roja, luz verde

Objetivo de este acertijo:
Usar el control boolean para determinar el color de una forma SVG.

Tutorial de la solución:
Los valores boolean de true y false se pueden usar con las if statements para controlar el flujo de tu código. Si una condición es true, se ejecuta un bloque de código. Si es false, se ejecuta un bloque de código diferente.

En el código con el que comienzas, hay una variable, greenLight, 3 círculos SVG, topCircle, middleCircle y bottomCircle, y una if statement. La if statement verifica el valor de greenLight. Si greenLight es true, al atributo 'fill' de bottomCircle se define en 'green'; de lo contrario, el atributo 'fill' de topCircle se define en 'red'. Como está, el valor de greenLight es false y el semáforo está en rojo. En este acertijo, cambiarás el valor de greenLight para que el semáforo esté en verde.

Para completar el acertijo, cambia el valor de greenLight a true.

Solución del código de ejemplo:
(Pulsa a continuación para revelar)

let greenLight = true;
let topCircle = svg.append('circle').attr('r', 25).attr('cx', 100).attr('cy', 50);
let middleCircle = svg.append('circle').attr('r', 25).attr('cx', 100).attr('cy', 100);
let bottomCircle = svg.append('circle').attr('r', 25).attr('cx', 100).attr('cy', 150);

if (greenLight === true){
    bottomCircle.attr('fill', 'green');
} else {
    topCircle.attr('fill', 'red');
}

Conceptos de JavaScript: variable, if statement, control boolean
Conceptos de D3: atributo, .append()