En esta página se muestran una parte de las soluciones de los ejercicios Variables (1), concretamente el fragmento PHP, sin el principio ni el final de la página que se pueden dejar en fragmentos HTML.
Si lo prefiere, puede descargar unas posibles soluciones completas de estos ejercicios.
<?php
$longitud = rand(10, 1000);
print " <p>Longitud: $longitud</p>\n";
print "\n";
print " <p>";
print " <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" \n";
print " width=\"" . $longitud . "px\" height=\"10px\">\n";
// forma alternativa
//print " width=\"{$longitud}px\" height=\"10px\">\n";
print " <line x1=\"1\" y1=\"5\" x2=\"$longitud\" y2=\"5\" stroke=\"black\" stroke-width=\"10\" />\n";
print " </svg>\n";
print " </p>";
?>
Este ejercicio se puede hacer con tres variables, una para cada componente de color:
<?php
$r = rand(0, 255);
$g = rand(0, 255);
$b = rand(0, 255);
print " <p>Color: rgb($r $g $b)</p>\n";
print "\n";
print " <p>\n";
print " <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" \n";
print " width=\"100\" height=\"100\">\n";
print " <circle cx=\"50\" cy=\"50\" r=\"50\" fill=\"rgb($r $g $b)\" />\n";
print " </svg>\n";
print " </p>\n";
?>
Pero también se puede hacer con una sola variable que almacene el código de color completo:
<?php
$color = "rgb(" . rand(0, 255) . " " . rand(0, 255) . " " . rand(0, 255) . ")";
print " <p>Color: $color</p>\n";
print "\n";
print " <p>";
print " <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" \n";
print " width=\"100\" height=\"100\">\n";
print " <circle cx=\"50\" cy=\"50\" r=\"50\" fill=\"$color\" />\n";
print " </svg>\n";
print " </p>";
?>
<?php
$dado1 = rand(1, 6);
$dado2 = rand(1, 6);
print " <p>\n";
print " <img src=\"img/$dado1.svg\" alt=\"$dado1\" width=\"140\" height=\"140\">\n";
print " <img src=\"img/$dado2.svg\" alt=\"$dado2\" width=\"140\" height=\"140\">\n";
print " </p>\n";
print "\n";
print " <p>Total: <span style=\"border: black 2px solid; padding: 10px; font-size: 300%\">" . $dado1 + $dado2 . "</span></p>\n";
?>
<?php
$a = rand(1, 10);
$b = rand(1, 10);
$c = rand(1, 10);
$maximo = max($a, $b, $c);
print " <p>\n";
print " <img src=\"img/c$a.svg\" alt=\"$a\" height=\"200\">\n";
print " <img src=\"img/c$b.svg\" alt=\"$b\" height=\"200\">\n";
print " <img src=\"img/c$c.svg\" alt=\"$c\" height=\"200\">\n";
print " </p>\n";
print "\n";
print "<p>La carta más alta es un <strong>$maximo</strong>.</p>\n";
?>
<?php
$rojo = rand(64, 255);
$verde = rand(64, 255);
$azul = rand(64, 255);
print " <p>\n";
print " <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" \n";
print " width=\"400\" height=\"300\" viewBox=\"-200 -120 400 300\">\n";
print " <text x=\"100\" y=\"-90\" text-anchor=\"start\" font-size=\"20\">Verde: $verde</text>\n";
print " <text x=\"-100\" y=\"-90\" text-anchor=\"end\" font-size=\"20\">Azul: $azul</text>\n";
print " <text x=\"0\" y=\"155\" text-anchor=\"middle\" font-size=\"20\">Rojo: $rojo</text>\n";
print " <path fill=\"rgb($rojo 0 0)\" stroke=\"black\" stroke-width=\"1\" d=\"M -73.85 36.92 A 75 75, 0, 1, 0, 73.85 36.92 A 75 75 0, 0, 1, 0 33.44 A 75 75 0, 0, 1, -73.85 36.92\" />\n";
print " <path fill=\"rgb(0 $verde 0)\" stroke=\"black\" stroke-width=\"1\" d=\"M 73.85 36.92 A 75 75, 0, 1, 0, 0 -93.44 A 75 75 0, 0, 1, 33.85 -16.92 A 75 75 0, 0, 1, 73.85 36.92\" />\n";
print " <path fill=\"rgb(0 0 $azul)\" stroke=\"black\" stroke-width=\"1\" d=\"M 0 -93.44 A 75 75, 0, 1, 0, -73.85 36.92 A 75 75 0, 0, 1, -33.85 -16.92 A 75 75 0, 0, 1, 0 -93.44\" />\n";
print " <path fill=\"rgb($rojo $verde 0)\" stroke=\"black\" stroke-width=\"1\" d=\"M 73.85 36.92 A 75 75, 0, 0, 0, 33.85 -16.92 A 75 75 0, 0, 1, 0 33.44 A 75 75 0, 0, 0, 73.85 36.92\" />\n";
print " <path fill=\"rgb($rojo 0 $azul)\" stroke=\"black\" stroke-width=\"1\" d=\"M -73.85 36.92 A 75 75, 0, 0, 0, 0 33.44 A 75 75 0, 0, 1, -33.85 -16.92 A 75 75 0, 0, 0, -73.85 36.92\" />\n";
print " <path fill=\"rgb(0 $verde $azul)\" stroke=\"black\" stroke-width=\"1\" d=\"M 0 -93.44 A 75 75, 0, 0, 0, -33.85 -16.92 A 75 75 0, 0, 1, 33.85 -16.92 A 75 75 0, 0, 0, 0 -93.44\" />\n";
print " <path fill=\"rgb($rojo $verde $azul)\" stroke=\"black\" stroke-width=\"1\" d=\"M 0 33.44 A 75 75, 0, 0, 0, 33.85 -16.92 A 75 75 0, 0, 0, -33.85 -16.92 A 75 75 0, 0, 0, 0 33.44\" />\n";
print " </svg>\n";
print " </p>\n";
?>
<?php
$r = rand(50, 150);
$ancho = 8 * $r + 20;
$alto = 2 * $r + 20;
print " <p≶Estos círculos tienen $r px de radio. Actualice la página para mostrar cuatro nuevos círculos.</p≶\n";
print "\n";
print " <p≶\n";
print " <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n";
print " width=\"$ancho\" height=\"$alto\" viewBox=\"-10 -10 $ancho $alto\" style=\"background-color: white;\" font-family=\"sans-serif\"≶\n";
print " <circle cx=\"$r\" cy=\"$r\" r=\"$r\" stroke=\"black\" stroke-width=\"1\" fill=\"red\" /≶\n";
print " <circle cx=\"" . 3 * $r . "\" cy=\"$r\" r=\"$r\" stroke=\"black\" stroke-width=\"1\" fill=\"yellow\" /≶\n";
print " <circle cx=\"" . 5 * $r . "\" cy=\"$r\" r=\"$r\" stroke=\"black\" stroke-width=\"1\" fill=\"green\" /≶\n";
print " <circle cx=\"" . 7 * $r . "\" cy=\"$r\" r=\"$r\" stroke=\"black\" stroke-width=\"1\" fill=\"blue\" /≶\n";
print " </svg≶\n";
print " </p>\n";
?>
<?php
$c1 = rand(50, 150);
$c2 = rand(50, 150);
$c3 = rand(50, 150);
$ancho = $c1 + $c2 + $c3 + 20;
$alto = max($c1, $c2, $c3) + 20;
print " <p>";
print " <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n";
print " width=\"$ancho\" height=\"$alto\" viewBox=\"-10 -10 $ancho $alto\" style=\"background-color: white;\" font-family=\"sans-serif\">\n";
print " <rect x=\"0\" y=\"0\" width=\"$c1\" height=\"$c1\" fill=\"red\" />\n";
print " <rect x=\"$c1\" y=\"0\" width=\"$c2\" height=\"$c2\" fill=\"green\" />\n";
print " <rect x=\"" . $c1 + $c2 . "\" y=\"0\" width=\"$c3\" height=\"$c3\" fill=\"blue\" />\n";
print " </svg>\n";
print " </p>";
?>
<?php
$r1 = rand(50, 150);
$r2 = rand(50, 150);
$r3 = rand(50, 150);
$ancho = 2 * $r1 + 2 * $r2 + 2 * $r3 + 20;
$alto = 2 * max($r1, $r2, $r3) + 20;
$centros = max($r1, $r2, $r3);
print " <p>\n";
print " <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n";
print " width=\"$ancho\" height=\"$alto\" viewBox=\"-10 -10 $ancho $alto\" style=\"background-color: white;\" font-family=\"sans-serif\">\n";
print " <circle cx=\"$r1\" cy=\"$centros\" r=\"$r1\" stroke=\"black\" stroke-width=\"2\" fill=\"red\" />\n";
print " <circle cx=\"" . 2 * $r1 + $r2 . "\" cy=\"$centros\" r=\"$r2\" stroke=\"black\" stroke-width=\"2\" fill=\"green\" />\n";
print " <circle cx=\"" . 2 * $r1 + 2 * $r2 + $r3 . "\" cy=\"$centros\" r=\"$r3\" stroke=\"black\" stroke-width=\"2\" fill=\"blue\" />\n";
print " </svg>\n";
print " </p>\n";
?>
<?php
$dado = rand(1, 6);
print " <p>";
print " <img src=\"img/$dado.svg\" alt=\"$dado\" width=\"140\" height=\"140\"></p>\n";
print " </p>";
print "\n";
print " <p>";
print " <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n";
print " width=\"620\" height=\"120\" viewBox=\"-15 -15 620 120\" style=\"background-color: white;\" font-family=\"sans-serif\">\n";
print " <rect x=\"0\" y=\"0\" width=\"100\" height=\"100\" stroke=\"black\" stroke-width=\"1\" fill=\"none\" />\n";
print " <text x=\"50\" y=\"80\" text-anchor=\"middle\" font-size=\"80\" fill=\"lightgray\" >1</text>\n";
print " <rect x=\"100\" y=\"0\" width=\"100\" height=\"100\" stroke=\"black\" stroke-width=\"1\" fill=\"none\" />\n";
print " <text x=\"150\" y=\"80\" text-anchor=\"middle\" font-size=\"80\" fill=\"lightgray\" >2</text>\n";
print " <rect x=\"200\" y=\"0\" width=\"100\" height=\"100\" stroke=\"black\" stroke-width=\"1\" fill=\"none\" />\n";
print " <text x=\"250\" y=\"80\" text-anchor=\"middle\" font-size=\"80\" fill=\"lightgray\" >3</text>\n";
print " <rect x=\"300\" y=\"0\" width=\"100\" height=\"100\" stroke=\"black\" stroke-width=\"1\" fill=\"none\" />\n";
print " <text x=\"350\" y=\"80\" text-anchor=\"middle\" font-size=\"80\" fill=\"lightgray\" >4</text>\n";
print " <rect x=\"400\" y=\"0\" width=\"100\" height=\"100\" stroke=\"black\" stroke-width=\"1\" fill=\"none\" />\n";
print " <text x=\"450\" y=\"80\" text-anchor=\"middle\" font-size=\"80\" fill=\"lightgray\" >5</text>\n";
print " <rect x=\"500\" y=\"0\" width=\"100\" height=\"100\" stroke=\"black\" stroke-width=\"1\" fill=\"none\" />\n";
print " <text x=\"550\" y=\"80\" text-anchor=\"middle\" font-size=\"80\" fill=\"lightgray\" >6</text>\n";
print " <circle cx=\"" . 100 * $dado - 50 . "\" cy=\"50\" r=\"30\" stroke=\"black\" stroke-width=\"2\" fill=\"red\" />\n";
print " </svg>\n";
print " </p>";
?>
El primer fragmento PHP dibuja los dados:
<?php
$d1 = rand(1, 6);
$d2 = rand(1, 6);
$d3 = rand(1, 6);
print " <p>\n";
print " <img src=\"img/$d1.svg\" alt=\"$d1\" width=\"120\" height=\"120\">\n";
print " <img src=\"img/$d2.svg\" alt=\"$d2\" width=\"120\" height=\"120\">\n";
print " <img src=\"img/$d3.svg\" alt=\"$d3\" width=\"120\" height=\"120\">\n";
print " </p>\n";
print "\n";
?>
El segundo fragmento PHP dibuja las explosiones:
<?php
print " <text x=\"" . $d1 * 40 + 10 . "\" y=\"45\" text-anchor=\"middle\" font-size=\"20\" fill=\"lightgray\" opacity=\"0\">\n";
print " 💥\n";
print " <animate dur=\"0.1s\" attributeName=\"opacity\" from=\"0\" to=\"1\" begin=\"" . $d1 * 0.1 + 0.5 . "s\" fill=\"freeze\" />\n";
print " </text>\n";
print " <text x=\"" . ($d1 + $d2) * 40 + 10 . "\" y=\"45\" text-anchor=\"middle\" font-size=\"20\" fill=\"lightgray\" opacity=\"0\">\n";
print " 💥\n";
print " <animate dur=\"0.1s\" attributeName=\"opacity\" from=\"0\" to=\"1\" begin=\"" . ($d1 + $d2) * 0.1 + 0.5 . "s\" fill=\"freeze\" />\n";
print " </text>\n";
print " <text x=\"" . ($d1 + $d2 + $d3) * 40 + 10 . "\" y=\"45\" text-anchor=\"middle\" font-size=\"20\" fill=\"lightgray\" opacity=\"0\">\n";
print " 💥\n";
print " <animate dur=\"0.1s\" attributeName=\"opacity\" from=\"0\" to=\"1\" begin=\"" . ($d1 + $d2 + $d3) * 0.1 + 0.5 . "s\" fill=\"freeze\" />\n";
print " </text>\n";
?>