Light Switch es-419 Explainer

Puzzle Explainer
#1

Explicador de Interruptor de luz

Objetivo de este acertijo: Hacer que la función turnOn active el interruptor y encienda la luz.

Tutorial de la solución: Cuando pulses el interruptor de luz, ejecutará la función turnOn, pero esa función está vacía. Debemos hacer dos cosas: mover el interruptor de luz hasta 35 y cambiar el color de la bombilla a amarillo. Esto se puede hacer con dos llamadas .attr(). Primero, lightSwitch debe tener una nueva ubicación vertical, lo que significa que se debe definir su atributo 'y'. Para cambiar lightBulb a amarillo, debes cambiar su atributo 'fill' a 'yellow'.

Solución del código de ejemplo:

(Pulsa a continuación para revelar)


function turnOn() {

lightSwitch.attr('y', 35);

lightBulb.attr('fill', 'yellow');

}

lightSwitch.on('click', turnOn);

Conceptos de JavaScript: bloque de código (función), expresión de miembro, identificadores

Conceptos de D3: .attr(‘y’,), .attr(‘fill’,), .on(‘click’,)

Código adicional (código oculto que se ejecuta antes del código del acertijo):


var switchPlate = svg.append('rect');

switchPlate.attr('width', 40).attr('height', 70).attr('fill', 'white').attr('x', 50).attr('y',30).attr('stroke','grey');

var innerPlate = svg.append('rect');

innerPlate.attr('width', 30).attr('height', 60).attr('fill', 'lightgrey').attr('x', 55).attr('y',35);

var lightSwitch = svg.append('rect');

lightSwitch.attr('width', 30).attr('height', 30).attr('fill', 'grey').attr('x', 55).attr('y', 65);

var stem = svg.append('rect');

stem.attr('width', 2).attr('height', 100).attr('fill', 'grey').attr('x', 180);

var base = svg.append('rect');

base.attr('width', 30).attr('height', 5).attr('fill', 'white').attr('x', 166).attr('y', 100).attr('stroke','grey');

var base2 = svg.append('rect');

base2.attr('width', 30).attr('height', 5).attr('fill', 'white').attr('x', 166).attr('y', 107).attr('stroke','grey');

var base3 = svg.append('rect');

base3.attr('width', 30).attr('height', 5).attr('fill', 'white').attr('x', 166).attr('y', 114).attr('stroke','grey');

var lightBulb = svg.append('circle');

lightBulb.attr('r', 30).attr('fill', 'black').attr('cx', 181).attr('cy', 152);
1 Like
#2
#3