Creare pagina web in HTML con pulsanti che modificano valore variabili

[SirSpark]

Ragazzi volevo chiedervi una mano nella creazione di questa pagina HTML. In poche parole sto facendo un controllo su delle risposte ad un questionario e, per evitare di controllare a mano ogni singola risposta in ogni scheda (sono piu di 100) con tanto di domande (16 in totale a scheda), vorrei creare una pagina che mi renda il lavoro "meno manuale" e con una configurazione del genere:

// [xxx] -> Le parentesi quadre stanno a rappresentare un pulsante, "xxx" indica il nome visibile sul pulsante.

Ottimo:      0        [Incrementa] (Alla pressione del pulsante "Incrementa", il valore della variabile "Ottimo" viene incrementato di 1)

Buono:       0        [Incrementa] (Alla pressione del pulsante "Incrementa", il valore della variabile "Buono" viene incrementato di 1)

Sufficiente: 0        [Incrementa] (Alla pressione del pulsante "Incrementa", il valore della variabile "Sufficiente" viene incrementato di 1)

Mediocre:    0        [Incrementa] (Alla pressione del pulsante "Incrementa", il valore della variabile "Mediocre" viene incrementato di 1)

Scarso:      0        [Incrementa] (Alla pressione del pulsante "Incrementa", il valore della variabile "Scarso" viene incrementato di 1)

[Resetta]            (Alla pressione del pulsante "Resetta", il valore di ogni variabile viene resettato e impostato a 0)

Sto provando e riprovando ma non riesco a dichiarare le variabili (Ottimo, Buono, ecc..) che poi dovranno essere incrementate/resettate dai rispettivi pulsanti.
Ho letto da qualche parte che per fare questa pagina devo per forza passare al php e creare un blocco di istruzioni dentro HTML (usando <?php e ?>), è cosi? Se si, qualcuno può spiegarmi bene come devo fare per ottenere quello che voglio?

Grazie mille per l'attenzione,
SirSpark.

[KillerWorm]

Ciao, non ho ben capito cosa ti serve ottenere esattamente. Mi sfugge qualcosa.
Una volta che fai i vari controlli e hai incrementato tali variabili/valori, cosa ne devi fare dei risultati?
Ho capito che ti serve fare una sorta di "segna punti", per questo non capisco perché ti serve creare una pagina html?
Ti serve salvare in qualche modo i risultati ottenuti? Ti serve renderli visibili online? Oppure ti serve solo annotarli momentaneamente?

Ad ogni modo non credo ti serva PHP. Da quanto descrivi sarebbe più opportuno usare JavaScrip perché puoi agire su eventi di pulsanti, eseguire calcoli e aggiornare al volo i valori sulla pagina.

Se non ti serve un'applicazione web, si potrebbe anche pensare ad un (più o meno) semplice "foglio di calcolo". In tal caso puoi utilizzare anche lì dei controlli come pulsanti ecc. (chiaro che ci vorrà un minimo di sviluppo anche per quello).

Puoi chiarire?

[SirSpark]

Ciao, non ho ben capito cosa ti serve ottenere esattamente. Mi sfugge qualcosa.
Una volta che fai i vari controlli e hai incrementato tali variabili/valori, cosa ne devi fare dei risultati?
Ho capito che ti serve fare una sorta di "segna punti", per questo non capisco perché ti serve creare una pagina html?
Ti serve salvare in qualche modo i risultati ottenuti? Ti serve renderli visibili online? Oppure ti serve solo annotarli momentaneamente?

Ad ogni modo non credo ti serva PHP. Da quanto descrivi sarebbe più opportuno usare JavaScrip perché puoi agire su eventi di pulsanti, eseguire calcoli e aggiornare al volo i valori sulla pagina.

Se non ti serve un'applicazione web, si potrebbe anche pensare ad un (più o meno) semplice "foglio di calcolo". In tal caso puoi utilizzare anche lì dei controlli come pulsanti ecc. (chiaro che ci vorrà un minimo di sviluppo anche per quello).

Puoi chiarire?

Innanzitutto ciao e grazie per aver risposto
Mi scuso se non mi sono spiegato bene, vorrei creare questa pagina solo per annotarmi momentaneamente i valori. Potrei farlo benissimo con excel, ma preferisco farlo usando una pagina web dato che questo lavoro lo faccio in presenza della professoressa di laboratorio (giusto per far vedere che mi impegno nel fare qualcosa di utile che potrà essere utilizzato anche in futuro).

Ho scelto HTML/PHP perchè di javascript non ricordo proprio nulla e poi perchè, sempre per il discorso precedente, stiamo studiando queste due cose: preferirei usare argomenti di scuola attuali per far piu bella figura.
Comunque ricordo che con Javascript si possono gestire eventi e eseguire azioni, potresti darmi una mano nella compilazione di sta maledetta pagina?

Grazie ancora,
SirSpark.

[KillerWorm]

Bene, ora mi è più chiaro.

Senza dubbio, come tu stesso ricordi, per gestire le varie operazioni (quindi variabili, eventi, funzioni e quant'altro) ti servirà comunque usare javascript.
E' chiaro che javascript dovrà agire su degli elementi html. Per cui dovrai realizzare prima di tutto la struttura html, cioè convertire il tuo schemino in codice html.
Mentre il php direi che non è necessario in questo caso, a meno che tu non voglia creare la pagina in modo dinamico.

A questo punto direi di vedere la parte html. Hai scritto che hai già provato a fare qualcosa. Presuppongo che tu abbia già impostato in qualche modo la struttura html. Puoi postarla, così da capire a che punto sei arrivato?

[SirSpark]

Bene, ora mi è più chiaro.

Senza dubbio, come tu stesso ricordi, per gestire le varie operazioni (quindi variabili, eventi, funzioni e quant'altro) ti servirà comunque usare javascript.
E' chiaro che javascript dovrà agire su degli elementi html. Per cui dovrai realizzare prima di tutto la struttura html, cioè convertire il tuo schemino in codice html.
Mentre il php direi che non è necessario in questo caso, a meno che tu non voglia creare la pagina in modo dinamico.

A questo punto direi di vedere la parte html. Hai scritto che hai già provato a fare qualcosa. Presuppongo che tu abbia già impostato in qualche modo la struttura html. Puoi postarla, così da capire a che punto sei arrivato?

Questo è il documento al suo stato attuale:

<html>    
    <head>
        <title>CONTROLLO QUESTIONARIO</title>
    </head>
        <div align="center">
            <body>
                <BR><BR>
                <table border="0">
                    <tr>
                        <td>
                            <?php        
                            $Ottimo = 0;
                        
                            echo "Ottimo: </n>" . $Ottimo;
                            ?>
                        </td>
                        <td>
                            <input type="button" name="submit" value="Incrementa" onclick="$Ottimo = $Ottimo++" />
                            <BR>
                        </td>
                    </tr>
                        
                    <tr>
                        <td>
                            <?php        
                            $Buono = 0;
                        
                            echo "Buono: " . $Buono;
                            ?>
                        </td>
                        <td>
                            <input type="button" name="submit" value="Incrementa" onclick="$Buono = $Buono++" />
                            <BR>
                        </td>
                    </tr>
                    
                    <tr>
                        <td>
                            <?php        
                            $Sufficiente = 0;
                        
                            echo "Sufficiente: " . $Sufficiente;
                            ?>
                        </td>
                        <td>
                            <input type="button" name="submit" value="Incrementa" onclick="$Sufficiente = $Sufficiente++" />
                        <BR>
                        </td>
                    </tr>
                    
                    <tr>
                        <td>
                            <?php        
                            $Mediocre = 0;
                        
                            echo "Mediocre: " . $Mediocre;    
                            ?>
                        </td>
                        <td>
                            <input type="button" name="submit" value="Incrementa" onclick="$Mediocre = $Mediocre++" />
                            <BR>
                        </td>
                    </tr>
                    
                    <tr>
                        <td>
                            <?php        
                            $Scarso = 0;
                        
                            echo "Scarso: " . $Scarso;
                            ?>
                        </td>
                        <td>
                            <input type="button" name="submit" value="Incrementa" onclick="$Scarso = $Scarso++" />                
                            <BR>
                        </td>
                    </tr>
                </table>
                <BR>
                <input type = "reset" value = "Resetta" onclick>
                <BR>            
        </body>
    </div>
</html>

Esteticamente è esattamente quello che voglio fare. E' solo che, lavorando in html/php ho problemi con l'obiettivo principale: "ordinare" ai pulsanti di fare (ciò che ho scritto in precedenza) rispetto alle variabili.

--EDIT--

Forse ho trovato una soluzione.. Se io provassi a creare due funzioni nel body dell'html per ogni variabile in cui:

(Prima funzione "Visualizza")
1. Dichiaro la variabile;
2. La faccio visualizzare sullo schermo in output.

(Seconda funzione "Incrementa")
1. Dichiaro la variabile;
2. Incremento il suo valore.

Dopodichè richiamo la funzione "Visualizza" a fianco di ogni echo (Esempio: echo "Ottimo: " . $Ottimo; )
e poi richiamo la funzione "Incrementa" nell'onclick di ogni pulsante di incremento (Esempio: ...onclick="Incrementa()" ).

Anche se un pò lunghina, potrebbe funzionare come idea?
Grazie dell'attenzione

[KillerWorm]

Aspetta, credo che tu abbia le idee un po' confuse riguardo l'utilizzo di php (ti sfugge sicuramente qualche principio basilare).

Ok per la parte html, si può partire da quella ma va aggiustata un pochino (ci sono alcuni errori anche molto gravi). Intanto la teniamo un attimo da parte.

Riguardo php non va utilizzato e non puoi utilizzarlo per ciò che cerchi di fare.
Cerco di spiegarti...
Il php, come tu ben saprai, è un linguaggio lato-server. In questo caso tutto quello che viene creato dal php sarà poi visualizzato nel tuo browser (quindi lato-client) sotto forma di semplice codice html (o quello che è).
Una volta che la pagina è creata, ed è visualizzata sul browser, non avrai più possibilità di "comunicare" con il tuo script php (se non per altre differenti vie).
Per intenderci, non puoi richiamare funzioni php o fare operazioni (utilizzando php) attraverso gli eventi degli elementi html.
Questo che hai scritto non ha senso di esistere:

onclick="$Ottimo = $Ottimo++"

Personalmente ti darei 2 per una cosa del genere... ma dal momento che per te è un argomento di studio è bene che tu faccia tuoi questi principi.

...e qui entra in gioco javascript che è un linguaggio lato-client e serve proprio a questo scopo, cioè eseguire delle operazioni (anche attraverso e sugli elementi html) una volta che la pagina è caricata sul tuo browser.

Se ti è chiaro questo principio possiamo andare avanti.

[SirSpark]

Aspetta, credo che tu abbia le idee un po' confuse riguardo l'utilizzo di php (ti sfugge sicuramente qualche principio basilare).

Ok per la parte html, si può partire da quella ma va aggiustata un pochino (ci sono alcuni errori anche molto gravi). Intanto la teniamo un attimo da parte.

Riguardo php non va utilizzato e non puoi utilizzarlo per ciò che cerchi di fare.
Cerco di spiegarti...
Il php, come tu ben saprai, è un linguaggio lato-server. In questo caso tutto quello che viene creato dal php sarà poi visualizzato nel tuo browser (quindi lato-client) sotto forma di semplice codice html (o quello che è).
Una volta che la pagina è creata, ed è visualizzata sul browser, non avrai più possibilità di "comunicare" con il tuo script php (se non per altre differenti vie).
Per intenderci, non puoi richiamare funzioni php o fare operazioni (utilizzando php) attraverso gli eventi degli elementi html.
Questo che hai scritto non ha senso di esistere:

onclick="$Ottimo = $Ottimo++"

Personalmente ti darei 2 per una cosa del genere... ma dal momento che per te è un argomento di studio è bene che tu faccia tuoi questi principi.

...e qui entra in gioco javascript che è un linguaggio lato-client e serve proprio a questo scopo, cioè eseguire delle operazioni (anche attraverso e sugli elementi html) una volta che la pagina è caricata sul tuo browser.

Se ti è chiaro questo principio possiamo andare avanti.

Sisi chiarissimo, possiamo proseguire

[KillerWorm]

Piccola parentesi: non serve che tu quoti ogni post quando rispondi sul forum. Il "quote" dell'intero post è ridondante e crea solo confusione quando non è necessario. Puoi utilizzarlo se ti serve citare qualcosa di specifico a cui devi far riferimento, altrimenti è meglio utilizzare il semplice "Rispondi".

Bene, allora quello che ti servirà è creare un semplice documento html con l'implementazione di un po' di javascript.

Io ti consiglierei di ripartire da zero e andare a creare la struttura con semplice html. Puoi seguire grossomodo quanto hai già fatto ma con alcuni accorgimenti.

1 - Per ottenere un documento html valido è generalmente necessario inserire un doctype come prima riga (consulta qualche guida se non sai cos'è, ad esempio questa). Tieni presente che il doctype determina la versione di html del documento e quindi il tipo di sintassi da usare nella stesura del codice stesso.

Io direi che puoi utilizzare HTML5 per cui dovrai avere questo semplice doctype (come prima riga del documento):

<!DOCTYPE HTML>

2 - Inoltre è importante specificare il tipo di codifica dei caratteri che si intende utilizzare nel documento. In poche parole puoi inserire questa riga dentro il tag <head></head>:

<meta charset="utf-8">

3 - Controlla sempre la correttezza della tua struttura html. Dopo l'elemento head deve esserci il <body> e nient'altro. Nel tuo esempio hai fatto un grossolano errore racchiudendo il body dentro un div.

4 - Puoi partire da un modello html come questo:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script type="text/javascript">
      // qui ci sarà tutto il javascript
    </script>
  </head>
  <body>
     Qui devi inserire la tabella in semplice html che riproduce il tuo schema iniziale
  </body>
</html>

Ora sta a te costruire la tabella, più o meno come hai già fatto ma scrivendo con html pulito (senza le parti in php).
Appena hai pronta questa parte andiamo avanti.