Creare cruciverba compilabile - Dreamweaver

S

Scar991

Utente Attivo
30 Apr 2012
167
0
0
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?
 
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
 
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>
 
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!
 
Ultima modifica:
Un'ultima cosa...
Quando si aggiorna la pagina, le risposte salvate sono sempre lì...
Come posso costruire un "if refresh -> session_destroy(); session_start();" ??
 
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
 
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ì...
 
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!
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

S
Creare un bollettino postale in html o altro linguaggio
Risposte
2
Visite
2K
HTML e CSS
salvo_76
S
F
Salve a tutti, devo creare un sito web/gioco online dove cliccando il tasto 'Inizia' del form viene estratta una capitale casualmente dal
Risposte
0
Visite
1K
PHP
faccone
F
C
Come ricreare questo calcolatore di prezzi a step con woocommerce?
Risposte
0
Visite
2K
WordPress
calmabubbasst
C
E
Creare un testo trasparente dietro un div
Risposte
5
Visite
3K
HTML e CSS
WmbertSea
WmbertSea
M
Creare traccia di download file sul server
Risposte
2
Visite
2K
HTML e CSS
Morgy
M
A
Cerco programmatore/sviluppatore per creare forum
Risposte
3
Visite
5K
Offerte e Richieste di Lavoro e/o Collaborazione
Riminese
R
L
Creare ancore interne alla pagina
Risposte
1
Visite
1K
PHP
WmbertSea
WmbertSea
I
Creare un banner temporaneo JavaScript
Risposte
0
Visite
1K
Javascript
IlTizioScriptato
I
C
Creare Tabella Dati Meteo prelevandoli da dei Tags in un altro foglio
Risposte
27
Visite
3K
PHP
Cavaliere
C
simgia
Cordova errore quando cerco di emulare o creare la app
Risposte
2
Visite
3K
Sviluppo app per Android
simgia
simgia
U
PHP creare un file excel dopo ricerca nel DB
Risposte
0
Visite
1K
PHP
Umberto Federico
U
A
Creare un cronometro
Risposte
5
Visite
2K
PHP
otto9due
otto9due
G
[PHP] Creare script di prenotazione con controllo disponibilità.
Risposte
7
Visite
4K
PHP
Rikk73
Rikk73
F
Ricreare struttura php+mysql su Xampp
Risposte
0
Visite
6K
Apache
francescoITA
F
F
Creare elementi html con javascript
Risposte
3
Visite
3K
Javascript
McLeanerGla
M
Shyson
Modificare codice e creare link
Risposte
0
Visite
925
PHP
Shyson
Shyson
Cosina
Creare bottone delete in form upload
Risposte
5
Visite
2K
PHP
princebhaini8
P
Cosina
  • Bloccata
Creare bottone delete in form upload
Risposte
1
Visite
1K
PHP
Max 1
Max 1
M
Creare un campo input select quantità di un numero intero prelevato dal db
Risposte
3
Visite
1K
PHP
maxnegri2036
M
L
Creare una forma geometrica
Risposte
1
Visite
2K
Photoshop
lorenzo228
L
Alto Basso