Creare cruciverba compilabile - Dreamweaver

Scar991 · 30 Set 2012

Salve a tutti!
Dovrei creare un cruciverba compilabile online...
Avevo pensato di creare con degli input, una sorta di matrice di riquadri, nella quale "disattivare e annerire" le caselle oscure, in modo da non poterci scrivere dentro, e di compilare le altre.

A tal proposito ho qualche domanda:
innanzitutto, è possibile effettuare una sorta di controllo? Nel senso, se io in quel gruppo di caselle non scrivo esattamente quella parola le lettere vengono cancellate...

Allo stesso tempo però se la parola è giusta, quella riga/colonna non può essere più cancellata...
Non so se mi sono spiegato...

Altri consigli? Come lo realizzereste?

borgo italia · 1 Ott 2012

ciao
credo che tu ti sia imbarcato in un problema.
vedo che hai postato nella sez. html, penso però che il tuo problema non sia risolvibile solo con l'html, ma implichi un linguaggio dinamico (php),
probabilmente un db(mysql) e js+ajax+jquery

Scar991 · 1 Ott 2012

Uhm, e con queste premesse saresti in grado di aiutarmi?

borgo italia · 2 Ott 2012

ciao
il tutto dipende dalla tua conoscienza di php ecc...
per alcune cose posso darti una mano (una mano non farltelo).
ti invio a titolo di esempio (ma molte cose sono ancora da mettere a punto) come generare una griglia di parole crociate e inserire i vari caratteri in modo da avere una prima idea a cosa vai incontro.
per vederla funzionare devi avere un tuo server in locale con php o caricarla in remoto (sempre che tu abbia php)
ricordati che al file puoi dargli il nome che preferisci, ma deve avere estenzione .php, altrimenti non funzia.

PHP:

<?php
session_start();
//negli array l'indice parte generalmente da 0
$righe=6;//numero righe meno uno
$colonne=5;//numero colonne meno uno - in questo caso ho grglia 7x6
//indico quali devono essere le celle nere
//dove primo indice -> indice della riga
//secondo indice -> indice della colonna
$celle_nere[0][4]=4;//una sola nera nella riga
$celle_nere[1][3]=3;//"
$celle_nere[2][3]=2;//"
$celle_nere[3][0]=0;//"
$celle_nere[4][1]=1;//due nere nella riga
$celle_nere[4][5]=5;//"
$celle_nere[5][2]=2;//una sola nera nella riga
$celle_nere[6][0]=0;//due nere nella riga
$celle_nere[6][4]=4;
//forse c'è un sistema migliore, ma questo modo mi facilita il controllo 
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>prova</title>
<style type="text/css">
.nera{background-color:#000000; color:#FFFFFF;}
td, input{
font-family:Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight:bold;
width:30px; height:auto;}
input{
width:25px; height:auto; text-align:center; border:none;}
.cella{font-size:9px; text-align:left;}
</style>
</head>
<body>
<?php
if(isset($_POST['0'])){//premuto il pulsante azzera tutto
	if(isset($_SESSION)){session_destroy();}
}
if(isset($_POST['I'])){//premuto il pulsante inserisci carattere
	for($r=0; $r <= $righe; $r++){//verifico cosa inserito in riga/colonna
		for($c=0; $c <=$colonne;$c++){
			if(trim($_POST['carattere'][$r][$c]) !=""){//la cella contiene un carattere
				//verifico che il carattere sia alfabetico
				if(strtoupper($_POST[carattere][$r][$c]) >="A" && strtoupper($_POST[carattere][$r][$c]) <= "Z"){
					$_SESSION['car'][$r][$c]=strtoupper($_POST[carattere][$r][$c]);
				}
			}
		}
	}
}
?>
<form action="#" method="post">
<table border="1">
<?php
$cella=1;
for($r=0; $r <= $righe; $r++){//genero le righe
	echo "<tr>";
	for($c=0; $c <=$colonne;$c++){
		//verifico se cella nero o con input
		if(in_array($c,$celle_nere[$r])){//se cella nell'elenco delle celle nere
			echo "<td class=\"nera\">&nbsp;</td>";//stampo una cella nera
		}else{//altrimenti stampo la casella di input
			if(isset($_SESSION['car'][$r][$c])){$valore=$_SESSION['car'][$r][$c];}else{$valore="";}
			echo "<td valign=\"middle\"><span class=\"cella\">$cella<br></span><input name=\"carattere[$r][$c]\" type=\"text\" id=\"carattere[$r][$c]\" size=\"1\" maxlength=\"1\" value=\"$valore\"></td>";
			$cella ++;
		}
	}
	echo "</tr>";
}
?>
</table>
inserisci carattere<input name="I" type="submit" value="I">&nbsp;&nbsp;&nbsp;&nbsp;azzera tutto<input name="0" type="submit" value="0">
</form>
<p></p>
</body>
</html>

Scar991 · 2 Ott 2012

Ciao!

Borgoitalia, ho modificato leggermente il tuo script secondo le mie esigenze...
Ho inserito un form nel quale scrivere la risposta formata da alcune lettere del cruciverba
ed ho inserito tutti i vari controlli per il confronto di stringhe (tra quella inserita ed una preimpostata)
che parte perfettamente al click di un pulsante.

Grazie mille, sei stato davvero d'aiuto!

Scar991 · 2 Ott 2012

Un'ultima cosa...
Quando si aggiorna la pagina, le risposte salvate sono sempre lì...
Come posso costruire un "if refresh -> session_destroy(); session_start();" ??

borgo italia · 2 Ott 2012

ciao
se devi ripulire tutto, nel mio script c'è, più complesso se vuoi ripulre solamente una parola, se invece vuoi cancellare un carattere e/o modificarlo lo script che ti ho postato lo fa (cancelli il carattere e submit),
comunque per capire meglio dovresti postare quello che hai fatto, è inutile che rimetta le mani sul mio, se ci sono modifiche è sempre meglio rupartire dall'ultima versione.
l'ideale poi sarebbe che non ci fosse il tasto di submit e anche non il refresh, ma qui servirebbe l'ausilio di chi conosce meglio di me ajax e/o jq

Scar991 · 2 Ott 2012

PHP:

<?php
session_start();

$righe=9;//numero righe meno uno
$colonne=9;//numero colonne meno uno - in questo caso ho grglia 7x6

$celle_nere[0][8]=8;
$celle_nere[0][9]=9;
$celle_nere[1][0]=0;
$celle_nere[2][0]=0;
$celle_nere[2][9]=9;
$celle_nere[4][5]=5;
$celle_nere[4][9]=9;
$celle_nere[5][0]=0;
$celle_nere[5][7]=7;
$celle_nere[6][0]=0;
$celle_nere[6][8]=8;
$celle_nere[6][9]=9;
$celle_nere[8][6]=6;

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Il Cruciverba</title>
<style type="text/css">
.nera{background-color:#000000; color:#FFFFFF;}
#cross {
	float: left;
	width: 500px;
}
#risposta {
	width: 300px;
}
td, input{
font-family:Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight:bold;
width:30px; height:auto;
text-transform:uppercase;}
#risposta {
	border: 1px solid #000;
	margin-right: auto;
	margin-left: auto;
	float: left;
	width: 300px;
}
#soluzione {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	text-align: center;
	vertical-align: middle;
}
#control {
	float: left;
}
input{
width:25px; height:auto; text-align:center; border:none;}
.cella{backgroundcolor:#fff;
font-size:9px; text-align:left;}
#cruciverba {
	color: #000;
}
#answer {
	vertical-align: middle;
	padding: 8px;
	height: 65px;
	width: 300px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #000;
	float: left;
	background:#FFF;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #003;
}
#pulsanti {
	color: #FFF;
	vertical-align: middle;
	text-align: center;
}
#ans_box {
	text-align: center;
}
#test {
	text-align: center;
}
body {
	background-color: #024d9e;
	background-image: url(Immagini/Background/bg_body.jpg);
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #FFF;
	background-repeat: repeat-x;
	background-position: top;
}
</style>
</head>
<body>

<h1>Il Cruciverba</h1>

<h3>Regole</h3>
<p>- Le parole da inserire funzionano solo <strong>orizzontalmente</strong>
  <br>
  - Quando siete sicuri di una risposta, cliccate sul tasto &quot;I&quot;<strong>Salva Inserimenti</strong> per non perdere le parole inserite!<br>
  - Una volta che avrete risposto a tutte le domande, inserite nello spazio sottostante il risultato del vostro quiz, prendendo le lettere corrispondenti ai numeri
  <br>
  - Cliccate su "!" per controllare la vostra risposta!
</p>
<div id="cross">
  <?php
if(isset($_POST['0'])){ //AZZERA
    if(isset($_SESSION)){session_destroy();}
}
if(isset($_POST['I'])){ //SALVA
    for($r=0; $r <= $righe; $r++){ 
        for($c=0; $c <=$colonne;$c++){
            if(trim($_POST['carattere'][$r][$c]) !=""){ 
                //verifico che il carattere sia alfabetico
                if(strtoupper($_POST[carattere][$r][$c]) >="A" && strtoupper($_POST[carattere][$r][$c]) <= "Z"){
                    $_SESSION['car'][$r][$c]=strtoupper($_POST[carattere][$r][$c]);
                }
            }
        }
    }
}
?>
  <form id="cruciverba" action="#" method="post">
  <table bgcolor="#FFFFFF" border="1">
  <?php
$cella=1;
for($r=0; $r <= $righe; $r++){ 
    echo "<tr>";
    for($c=0; $c <=$colonne;$c++){

        if(in_array($c,$celle_nere[$r])){ 
            echo "<td class=\"nera\">&nbsp;</td>"; 
        }else{
            if(isset($_SESSION['car'][$r][$c])){$valore=$_SESSION['car'][$r][$c];}else{$valore="";}
            echo "<td valign=\"middle\"><span class=\"cella\">$cella<br></span><input name=\"carattere[$r][$c]\" type=\"text\" id=\"carattere[$r][$c]\" size=\"1\" maxlength=\"1\" value=\"$valore\"></td>";
            $cella ++;
        }
    }
    echo "</tr>";
}
?>
  </table>
  <div id="pulsanti">
    Salva Inserimenti <input name="I" type="submit" value="I">&nbsp;&nbsp;&nbsp;&nbsp;Svuota il Cruciverba <input name="0" type="submit" value="0">
    </div>
  </form>
</div>
<div id="definizioni">
  <p>1. DEF<br>
    9. DEF<br>
    18. DEF<br>
    26. DEF<br>
    36. DEF<br>
    41. DEF<br>
    44. DEF<br>
    50. DEF<br>
    52. DEF<br>
    59. DEF<br>
    69. DEF<br>
    75. DEF<br>
    78. DEF<br>
  <br>
    Soluzione: "TEMA_SOLUZIONE"<br>
Clicca sul "!" per controllare la tua risposta
</p>
<form name="form2" method="post" action="">
    <input name="soluzione" type="text" id="soluzione" readonly="readonly" value="52">
    <input name="soluzione2" type="text" id="soluzione" readonly="readonly" value="13">
  <input name="soluzione2" type="text" id="soluzione" readonly="readonly" value="57">
  <input name="soluzione2" type="text" id="soluzione" readonly="readonly" value="80">
  <input name="soluzione2" type="text" id="soluzione" readonly="readonly" value="5">
  <input name="soluzione2" type="text" id="soluzione" readonly="readonly" value="80">
  <input name="soluzione2" type="text" id="soluzione" readonly="readonly" value="13">
  <input name="soluzione2" type="text" id="soluzione" readonly="readonly" value="10">
  <input name="soluzione2" type="text" id="soluzione" readonly="readonly" value="69">
  <input name="soluzione2" type="text" id="soluzione" readonly="readonly" value="77">
</form>
<p align="center"><form name="test" method="post" action="" id="test">
    <input type="risposta" name="risposta" id="risposta"> <input type="submit" name="control" id="control" value="!">
  </form></p>
  <br>
  <br>
<br>
<div id="answer">
<?php
if (isset($_POST["control"])){
	
$ans=strtoupper($_POST['risposta']);
$pen="STRINGA_COMPARAZIONE";

$try=strcasecmp($ans,$pen);

if ($try==0){
	echo "<p align=\"center\">La risposta è corretta!</p>";
}else{
	echo "<p align=\"center\">Controlla le tue risposte! Hai commesso qualche errore!</p>";
	}
}
?>
</div>
</body>
</html>

Se compili il cruciverba e "registri" i dati con l'"inserisci parola", se premi F5 invece di svuotarsi la parola rimane lì...

borgo italia · 2 Ott 2012

ciao
attento da errore alla riga 139
Warning: in_array() [function.in-array]: Wrong datatype for second argument in C:\AppServ\www\corso\0_protezione\_crociate.php on line 139
in quanto (es) ciclando la $celle_nere[$r] con $r = 3 o 7 o 9 non esistono quindi la funzione in_array va in tilt
quindi ho aggiunto un if che verifica che esistano e se si verifica se nono nere
per azzerare il tutto (in effetti si azzerava al secondo submit 0) ho aggiunto un comando meta
poi
input type="risposta" ?? non esiste tale type
inoltre mi da errore su alcuni div aoerti ed evidentemente non chiusi , verifica
comunque ecco lo script con le aggiunte fatte, confrontalo con quello che hai postato e riprovalo

PHP:

<?php
session_start();
$righe=9;//numero righe meno uno
$colonne=9;//numero colonne meno uno - in questo caso ho grglia 10x10
$celle_nere[0][8]=8;
$celle_nere[0][9]=9;
$celle_nere[1][0]=0;
$celle_nere[2][0]=0;
$celle_nere[2][9]=9;
$celle_nere[4][5]=5;
$celle_nere[4][9]=9;
$celle_nere[5][0]=0;
$celle_nere[5][7]=7;
$celle_nere[6][0]=0;
$celle_nere[6][8]=8;
$celle_nere[6][9]=9;
$celle_nere[8][6]=6;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Il Cruciverba</title>
<style type="text/css">
.nera{background-color:#000000; color:#FFFFFF;}
#cross {
    float: left;
    width: 500px;
}
#risposta {
    width: 300px;
}
td, input{
font-family:Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight:bold;
width:30px; height:auto;
text-transform:uppercase;}
#risposta {
    border: 1px solid #000;
    margin-right: auto;
    margin-left: auto;
    float: left;
    width: 300px;
}
#soluzione {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10px;
    text-align: center;
    vertical-align: middle;
}
#control {
    float: left;
}
input{
width:25px; height:auto; text-align:center; border:none;}
.cella{backgroundcolor:#fff;
font-size:9px; text-align:left;}
#cruciverba {
    color: #000;
}
#answer {
    vertical-align: middle;
    padding: 8px;
    height: 65px;
    width: 300px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #000;
    float: left;
    background:#FFF;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    color: #003;
}
#pulsanti {
    color: #FFF;
    vertical-align: middle;
    text-align: center;
}
#ans_box {
    text-align: center;
}
#test {
    text-align: center;
}
body {
    background-color: #024d9e;
    background-image: url(Immagini/Background/bg_body.jpg);
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #FFF;
    background-repeat: repeat-x;
    background-position: top;
}
</style>
</head>
<body>
<h1>Il Cruciverba</h1>
<h3>Regole</h3>
<p>- Le parole da inserire funzionano solo <strong>orizzontalmente</strong>
  <br>
  - Quando siete sicuri di una risposta, cliccate sul tasto &quot;I&quot;<strong>Salva Inserimenti</strong> per non perdere le parole inserite!<br>
  - Una volta che avrete risposto a tutte le domande, inserite nello spazio sottostante il risultato del vostro quiz, prendendo le lettere corrispondenti ai numeri
  <br>
  - Cliccate su "!" per controllare la vostra risposta!
</p>
<div id="cross">
  <?php
if(isset($_POST['0'])){ //AZZERA
    if(isset($_SESSION)){session_destroy();
	echo "<meta http-equiv='Refresh' content='0; URL=".htmlspecialchars($_SERVER['PHP_SELF'])."'>";//AGGIUNTA
}
}
if(isset($_POST['I'])){ //SALVA
    for($r=0; $r <= $righe; $r++){ 
        for($c=0; $c <=$colonne;$c++){
            if(trim($_POST['carattere'][$r][$c]) !=""){ 
                //verifico che il carattere sia alfabetico
                if(strtoupper($_POST[carattere][$r][$c]) >="A" && strtoupper($_POST[carattere][$r][$c]) <= "Z"){
                    $_SESSION['car'][$r][$c]=strtoupper($_POST[carattere][$r][$c]);
                }
            }
        }
    }
}
?>
  <form id="cruciverba" action="#" method="post">
  <table bgcolor="#FFFFFF" border="1">
  <?php
$cella=1;
for($r=0; $r <= $righe; $r++){ 
    echo "<tr>";
    for($c=0; $c <=$colonne;$c++){
		if(isset($c,$celle_nere[$r])){//AGGIUNTE righe con if esiste
			if(in_array($c,$celle_nere[$r])){ 
            	echo "<td class=\"nera\">&nbsp;</td>";
			}else{
				if(isset($_SESSION['car'][$r][$c])){$valore=$_SESSION['car'][$r][$c];}else{$valore="";}
            	echo "<td valign=\"middle\"><span class=\"cella\">$cella<br></span><input name=\"carattere[$r][$c]\" type=\"text\" id=\"carattere[$r][$c]\" size=\"1\" maxlength=\"1\" value=\"$valore\"></td>";
            	$cella ++;
			}
		}else{
            if(isset($_SESSION['car'][$r][$c])){$valore=$_SESSION['car'][$r][$c];}else{$valore="";}
            echo "<td valign=\"middle\"><span class=\"cella\">$cella<br></span><input name=\"carattere[$r][$c]\" type=\"text\" id=\"carattere[$r][$c]\" size=\"1\" maxlength=\"1\" value=\"$valore\"></td>";
            $cella ++;
        }
    }
    echo "</tr>";
}
?>
  </table>
  <div id="pulsanti">
    Salva Inserimenti <input name="I" type="submit" value="I">&nbsp;&nbsp;&nbsp;&nbsp;Svuota il Cruciverba <input name="0" type="submit" value="0">
    </div>
  </form>
</div>
<div id="definizioni">
  <p>1. DEF<br>
    9. DEF<br>
    18. DEF<br>
    26. DEF<br>
    36. DEF<br>
    41. DEF<br>
    44. DEF<br>
    50. DEF<br>
    52. DEF<br>
    59. DEF<br>
    69. DEF<br>
    75. DEF<br>
    78. DEF<br>
  <br>
    Soluzione: "TEMA_SOLUZIONE"<br>
Clicca sul "!" per controllare la tua risposta
</p>
<form name="form2" method="post" action="">
    <input name="soluzione" type="text" id="soluzione" readonly="readonly" value="52">
    <input name="soluzione2" type="text" id="soluzione" readonly="readonly" value="13">
  <input name="soluzione2" type="text" id="soluzione" readonly="readonly" value="57">
  <input name="soluzione2" type="text" id="soluzione" readonly="readonly" value="80">
  <input name="soluzione2" type="text" id="soluzione" readonly="readonly" value="5">
  <input name="soluzione2" type="text" id="soluzione" readonly="readonly" value="80">
  <input name="soluzione2" type="text" id="soluzione" readonly="readonly" value="13">
  <input name="soluzione2" type="text" id="soluzione" readonly="readonly" value="10">
  <input name="soluzione2" type="text" id="soluzione" readonly="readonly" value="69">
  <input name="soluzione2" type="text" id="soluzione" readonly="readonly" value="77">
</form>
<p align="center"><form name="test" method="post" action="" id="test">
    <input type="risposta" name="risposta" id="risposta"> <input type="submit" name="control" id="control" value="!">
  </form></p>
  <br>
  <br>
<br>
<div id="answer">
<?php
if (isset($_POST["control"])){ 
	$ans=strtoupper($_POST['risposta']);
	$pen="STRINGA_COMPARAZIONE";
	$try=strcasecmp($ans,$pen);
if ($try==0){
    echo "<p align=\"center\">La risposta è corretta!</p>";
}else{
    echo "<p align=\"center\">Controlla le tue risposte! Hai commesso qualche errore!</p>";
    }
}
?>
</div>
</body>
</html>

p.s.
non hai ancora finito vero? perche inserendo STRINGA_COMPARAZIONE sotto i numeri da La risposta è corretta!

Creare cruciverba compilabile - Dreamweaver

Scar991

Utente Attivo

borgo italia

Super Moderatore

Scar991

Utente Attivo

borgo italia

Super Moderatore

Scar991

Utente Attivo

Scar991

Utente Attivo

borgo italia

Super Moderatore

Scar991

Utente Attivo

borgo italia

Super Moderatore

Discussioni simili

Creare cruciverba compilabile - Dreamweaver

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Discussioni simili

Privacy & Transparency

Privacy & Transparency