Exámenes - Cuadros grises

En este ejercicio se debe crear un programa que muestra la tirada de un dado al azar y la puntuación acumulada (hasta que se cierra el navegador):

Cuadros grises - Comentarios

Cuadros grises - Ejemplo de código HTML

Nota: El ejemplo siguiente muestra sólo tres cuadros

<h2>Cuadros desordenados</h2>

<p>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="100px" height="100px">
    <rect x="5" y="5" width="90" height="90" stroke="black" stroke-width="2"
      fill="rgb(86, 86, 86)" />
  </svg>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="100px" height="100px">
    <rect x="5" y="5" width="90" height="90" stroke="black" stroke-width="2"
      fill="rgb(132, 132, 132)" />
  </svg>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="100px" height="100px">
    <rect x="5" y="5" width="90" height="90" stroke="black" stroke-width="2"
      fill="rgb(53, 53, 53)" />
  </svg>
</p>

<h2>Cuadros ordenados</h2>

<p>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="100px" height="100px">
    <rect x="5" y="5" width="90" height="90" stroke="black" stroke-width="2"
      fill="rgb(132, 132, 132)" />
  </svg>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="100px" height="100px">
    <rect x="5" y="5" width="90" height="90" stroke="black" stroke-width="2"
      fill="rgb(86, 86, 86)" />
  </svg>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="100px" height="100px">
    <rect x="5" y="5" width="90" height="90" stroke="black" stroke-width="2"
      fill="rgb(53, 53, 53)" />
  </svg>
</p>

Cuadros grises - Ejemplo de programa

Nota: El día del examen los alumnos no tienen acceso a este ejemplo, solamente tienen acceso a las capturas del apartado anterior.

Un ejemplo de programa puede probarse en la ventana siguiente:

ERROR (no puede mostrarse el objeto)
Enlace a ejemplo