HTML - ayuda como puedo armar estooooooooo....

   
Vista:

ayuda como puedo armar estooooooooo....

Publicado por hernan (1 intervención) el 28/03/2015 05:15:14
hola como estan..... quiero armar un tarot para mi web y encontre esto... pero la verdad sigo los pasos y no llego a nada por favor me podrian ayudar.....

Paso 1
Para nuestro primero paso crearemos las variables de cada valor de cada carta de tarot (valga la redundancia).

Código PHP:
1
2
3
4
5
$TextosCartas[0] = 'Esta carta es una carta';
$TextosCartas[1] = 'Esta es otra carta que hace algo';
$TextosCartas[2] = 'Si cruzas sin mirar la calle te atropella un venado';
$TextosCartas[3] = 'Si miras para arriba te cae un elefante';
$TextosCartas[4] = '...';
Estas variables contendrán los valores de cada carta!

Ahora agregaremos las variables que contienen los nombres de las cartas

Código PHP:
1
2
3
4
5
$TextosTitulos[0] = 'El loco';
$TextosTitulos[1] = 'El pokemon';
$TextosTitulos[2] = 'El Troll';
$TextosTitulos[3] = 'El chanchito valiente que cruzo la calle';
$TextosTitulos[4] = '...';
Estas variables las guardamos en un archivo llamado: cartas.php

Paso 2

Ahora crearemos el entorno gráfico de nuestro sitio (script mas que nada) (index.php)
Lo que haremos es colocar mostrar imágenes de cartas y abajo de cada carta un checkbox (HTML) para que el usuario seleccione 3 cartas.
Código PHP:

1
2
3
4
5
6
7
8
9
<?php
        define('WEB','http://127.0.0.1/ForoBeta/tarot/'); //URL de nuestro script
        echo '<table border="0" cellpadding="0" cellspacing="0"><tr>';
        echo '<td><center><img src="'.WEB.'pic1/carta.png"><br/><input type="checkbox" name="carta[]" value="1"></center></td>';
        for($i=2;$i<=11;$i++){ echo '<td><center><img src="'.WEB.'pic1/carta2.png"><br/><input type="checkbox" name="carta[]" value="'.$i.'"></center></td>'; }
        echo '<td><center><img src="'.WEB.'pic1/carta.png"><br/><input type="checkbox" name="carta[]" value="12"></center></td>';
        for($i=13;$i<=22;$i++){ echo '<td><center><img src="'.WEB.'pic1/carta2.png"><br/><input type="checkbox" name="carta[]" value="'.$i.'"></center></td>'; }
        echo '</tr></table><br/>';
?>
Lo que hacemos es un un for para mostrar las cartas (es para no colocar imagen por imagen y checkbox por checkbox jajaja), quedaría asi:


Luego agregamos todo dentro de un formulario HTML.

Código HTML:

1
2
3
4
5
6
<form action="" method="GET">
 
ACA CODE PHP ANTERIOR
 
<input type="submit" name="FO" value="Ver Cartas">
</form>

Paso 3
En este paso agregaremos algo de lógica a nuestro script, verificaremos si el usuario ha seleccionado alguna carta, si la cantidad de cartas es igual a 3, y mostrar resultados.

Código PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
if($_GET[FO]==""){
 
//ACA FORMULARIO PASO 2
 
}else{
 if(count($_GET['carta'])!=3){
  echo 'Tienes que seleccionar 3 cartas!<a href="'.WEB.'">Volver...</a>';
 else {
  include('cartas.php'); //agregamos los valores de las cartas a nuestro script
  $VAL = array_rand($TextosCartas, 3); //obtenemos 3 cartas al azar (SI...asi es el tarot online XD)
  //creamos un for para mostrar los valores de nuestros array de cartas, array_rand saca 3 ID de nuestro array al azar...
  for($i=0;$i<3;$i++){
    echo '<tr><td colspan="2" style="background:#d6614d;"><font size="1" face="verdana">'.$TextosCarta[$i].'</font></td></tr><tr><td valign="top"><center><img width="100" src="'.WEB.'pic1/'.$VAL[$i].'.jpg"><br/><font size="1" face="verdana"><b>'.$TextosTitulos[$VAL[$i]].'</b></font></center></td><td width="100%" valign="top"><font size="3" face="verdana">'.$TextosCartas[$VAL[$i]].'</font></td></tr>';
   }
 }
}
?>

Paso 4
Ejecutar nuestro script, nos mostrara las cartas de este modo (todo se puede mejorar jejeje):


Paso 5 - Agregar en Blogger y Wordpress
Para agregarlo en Blogger / Wordpress solo tienen que crear una entrada (o pagina) y agregar un iframe hacia el script.
Código HTML:
1
<iframe src="http://sitio.com/script_tarot/" frameborder="0" border="0" width="100%" height="500px" style="overflow:scroll;overflow-x: scroll;"></iframe>
En blooger si quisieran programarlo, tendrían que crear variables con los valores, mostrar las cartas, ver cuantas cartas selecciono, ocultar las cartas y mostrar el resultado. Todo En javascript + HTML
En Wordpress les digo que lo agreguen como un iframe ya que sino perderían el theme (osea quedaría con el diseño del script y no del WP)
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
-2
Responder
Imágen de perfil de Alberto

ayuda como puedo armar estooooooooo....

Publicado por Alberto (17 intervenciones) el 01/04/2015 02:01:22
Hola...

1.- En pocas palabras, ese código que andas probando no es funcional?
2.- Caso contrario, por lo menos has intentado analizar el código, a mi punto de vista siento que hay líneas de más cuando creas el arreglo con valores. Por ejemplo, esto...

1
2
3
4
5
$TextosCartas[0] = 'Esta carta es una carta';
$TextosCartas[1] = 'Esta es otra carta que hace algo';
$TextosCartas[2] = 'Si cruzas sin mirar la calle te atropella un venado';
$TextosCartas[3] = 'Si miras para arriba te cae un elefante';
$TextosCartas[4] = '...';

Viene siendo exactamente igual a esto.

1
2
$TextosCartas = array ('Esta carta es una carta','Esta es otra carta que hace algo','Si cruzas sin mirar la calle te atropella un venado',''Si miras para arriba te cae un elefante','...');

Lo que puedes hacer en cinco líneas de código, lo reduces a simplemente una línea y a lo mucho dos.

3.- Si lo analizas cuidadosamente, no tiene mucha complejidad tu aplicación, y obviamente analizar lo que vas haciendo. Te daré un pista, cada Check te retorna true o false por defecto, por lo tanto podríamos manejarlo en PHP como 1 o 0, ahora, si un determinado Check es true entonces muestra lo que gustes mostrar, para ello tienes que recorrer el arreglo de respuestas que tienes en tu HTML.

Intenta plasmar la pista que te di y completa con lo que falta, y verás que era mas sencillo de lo que crees, sin embargo, cualquier inconveniente aquí estamos. Suerte!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar