Lückentext

Stef

Hey zusammen,

ich habe mal einen Lückentext erstellt. Funktioniert soweit auch alles.
Aber ich möchte dazu noch das wenn ein richtiges Wort eingetragen wird in der Zeile Fehlende Wörter das wort durchgestrichen wird, und bei Fehlern, das input feld einen roten border bekommt.

Beispiel:
Ich fülle jetzt den Lückentext aus und klick absenden, und alle richtig sind sollen alle durchgestrichen werden, und bei fehlern die fehlerhaften wörter nicht durchgestrichen werden und ein roter border um fehlerhafte input felder soll erscheinen

Wie kann man es machen?

Anbei meine Datei:

PHP

<?php
  error_reporting(E_ALL);

if(isset($_POST['abgesendet'])){


if(isset($_POST['rotkaepchen'])){
    $wort1 = $_POST['rotkaepchen'];    
} else{
    $wort1 = null;
}
if(isset($_POST['mutter'])){
    $wort2 = $_POST['mutter'];    
} else{
    $wort2 = null;
}
if(isset($_POST['weg'])){
    $wort3 = $_POST['weg']    ;
} else{
    $wort3 = null;
}
if(isset($_POST['wolf'])){
    $wort4 = $_POST['wolf'];
} else{
    $wort4 = null;
}
if(isset($_POST['blumenstrauß'])){
    $wort5 = $_POST['blumenstrauß'];    
} else{
    $wort5 = null;
}
if(isset($_POST['großmutter'])){
    $wort6 = $_POST['großmutter'];    
} else{
    $wort6 = null;
}
if(isset($_POST['großmutters'])){
    $wort7 = $_POST['großmutters'];    
} else{
    $wort7 = null;
}
if(isset($_POST['gestalt'])){
    $wort8 = $_POST['gestalt'];    
} else{
    $wort8 = null;
}
if(isset($_POST['jaeger'])){
    $wort9 = $_POST['jaeger'];    
} else{
    $wort9 = null;
}
if(isset($_POST['steine'])){
    $wort10 = $_POST['steine'];
} else{
    $wort10 = null;
}


$ltw1 = "Rotkäppchen";
$ltw2 = "Mutter";
$ltw3 = "Weg";
$ltw4 = "Wolf";
$ltw5 = "Blumenstrauß";
$ltw6 = "Großmutter";
$ltw7 = "Großmutters";
$ltw8 = "Gestalt";
$ltw9 = "Jäger";
$ltw10 = "Steine";


if ($_POST['rotkaepchen'] === $ltw1 and
    $_POST['mutter'] === $ltw2 and
    $_POST['weg'] === $ltw3 and
    $_POST['wolf'] ===  $ltw4 and
    $_POST['blumenstrauß'] === $ltw5 and
    $_POST['großmutter'] === $ltw6 and
    $_POST['großmutters'] === $ltw7 and
    $_POST['gestalt'] === $ltw8  and
    $_POST['jaeger'] === $ltw9 and
    $_POST['steine'] === $ltw10
    ) {
    $ausgabe1 = "Sie haben den Lückentext richtig ausgefüllt, ohne Fehler.";
} else{
    $ausgabe1 = null;
}


if ($_POST['rotkaepchen'] !== $ltw1 ) {
    $ausgabe2 = "Fehler im 1 Kasten";
}  else{
    $ausgabe2 = null;
}
if ($_POST['mutter'] !== $ltw2) {
    $ausgabe3 = "<br>Fehler im 2 Kasten";
} else{
    $ausgabe3 = null;
}
if ($_POST['weg'] !== $ltw3 ) {
    $ausgabe4 = "<br>Fehler im 3 Kasten";
} else{
    $ausgabe4 = null;
}
if ($_POST['wolf'] !==  $ltw4 ) {
    $ausgabe5 = "<br>Fehler im 4 Kasten";
} else{
    $ausgabe5 = null;
}
if ($_POST['blumenstrauß'] !== $ltw5 ) {
    $ausgabe6 = "<br>Fehler im 5 Kasten";
}else{
    $ausgabe6 = null;
}
 if ($_POST['großmutter'] !== $ltw6 ) {
    $ausgabe7 = "<br>Fehler im 6 Kasten";
}else{
    $ausgabe7 = null;
} 
if ($_POST['großmutters'] !== $ltw7) {
    $ausgabe8 = "<br>Fehler im 7 Kasten";
}else{
    $ausgabe8 = null;
} 
if ($_POST['gestalt'] !== $ltw8 ){
    $ausgabe9 = "<br>Fehler im 8 Kasten";
} else{
    $ausgabe9 = null;
}
if ($_POST['jaeger'] !== $ltw9) {
    $ausgabe10 = "<br>Fehler im 9 Kasten";
}else{
    $ausgabe10 = null;
} 
if ($_POST['steine'] !== $ltw10) {
    $ausgabe11 = "<br>Fehler im 10 Kasten";
}else{
    $ausgabe11 = null;
}


$arr = array ($ausgabe1,$ausgabe2,$ausgabe3,$ausgabe4,$ausgabe5,$ausgabe6,$ausgabe7,$ausgabe8,$ausgabe9,$ausgabe10,$ausgabe11);
}
?>
<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Lückentext</title>


            <style type="text/css">
                * {
                    margin: 0px;
                    padding: 0px;
                    font-family: Verdana,sans-serif;
                }


                h1{
                    margin-bottom: 10px;        
                }
                main{
                    width: 1000px;
                    margin: 40px auto;
                    background-color: rgba(73, 149, 156, 0.78);
                    padding: 20px;
                    border: 2px solid black;
                    border-radius: 30px;
                    box-shadow: 2px 2px 4px black;
                }
                p{
                    line-height: 30px;
                }


                p.woerter{
                    margin-top: 15px;
                    border: 1px solid black;
                    padding: 2.5px;
                    background-color: yellow;
                    text-align: center;
                }
                input[type='text']{
                    padding: 2.5px;
                }
                input[type='submit']{
                    padding: 20px;
                    margin-top: 15px;
                    transition: 1s;
                    border: none;
                }
                div#phpausgabe{
                    margin-top: 10px;
                    color: red;
                }


                input[type='submit']:hover
                {
                    background-color: gold;
                    cursor: pointer;
                    box-shadow: 0px 2px 5px black;
                }
            </style>
        </head>
    <body>
    <main>
    <h1>Lückentext</h1>
    <form method="post">
    <p>Ein kleines Mädchen, <input type="text" name="rotkaepchen"  <?php if(isset($wort1)) print ($wort1 == $ltw1) ? 'value="'. $wort1 .'"' : ""; ?>>, dem seine Großmutter einst eine rote Kappe geschenkt hat, wird von der <input type="text" name="mutter" <?php if(isset($wort2)) print ($wort2 == $ltw2) ? 'value="'. $wort2 .'"' : ""; ?> > geschickt, der in einem Haus im Wald wohnenden, bettlägerig kranken Großmutter einen Korb mit Leckereien (Kuchen und Wein) zu bringen. Die Mutter warnt Rotkäppchen eindringlich, es solle nicht vom <input type="text" name="weg" <?php if(isset($wort3)) print ($wort3 == $ltw3) ? 'value="'. $wort3 .'"' : ""; ?>> abgehen. Im Wald lässt es sich auf ein Gespräch mit einem <input type="text" name="wolf" <?php if(isset($wort4)) print ($wort4 == $ltw4) ? 'value="'. $wort4 .'"' : ""; ?>> ein. Dieser horcht Rotkäppchen aus und macht es auf die schönen Blumen auf einer nahen Wiese aufmerksam, worauf Rotkäppchen beschließt, noch einen <input type="text" name="blumenstrauß"<?php if(isset($wort5)) print ($wort5 == $ltw5) ? 'value="'. $wort5 .'"' : ""; ?>> zu pflücken, der Warnung der Mutter zum Trotz. Der Wolf eilt geradewegs zur <input type="text" name="großmutter" <?php if(isset($wort6)) print ($wort6 == $ltw6) ? 'value="'. $wort6 .'"' : ""; ?>> und frisst sie. Er legt sich in deren Nachthemd in ihr Bett und wartet auf Rotkäppchen. Bald darauf erreicht Rotkäppchen das Haus, tritt ein, und begibt sich an  <input type="text" name="großmutters" <?php if(isset($wort7)) print ($wort7 == $ltw7) ? 'value="'. $wort7 .'"' : ""; ?>> Bett. Dort wundert sich Rotkäppchen über die  <input type="text" name="gestalt" <?php if(isset($wort8)) print ($wort8 == $ltw8) ? 'value="'. $wort8 .'"' : ""; ?>> ihrer Großmutter, erkennt aber nicht den Wolf, bevor es ebenfalls gefressen wird.Großmutter und Rotkäppchen werden aber von einem  <input type="text" name="jaeger" <?php if(isset($wort9)) print ($wort9 == $ltw9) ? 'value="'. $wort9 .'"' : ""; ?>> aus dem Bauch des Wolfes befreit. Der Jäger  füllt  dem Wolf  <input type="text" name="steine" <?php if(isset($wort10)) print ($wort10 == $ltw10) ? 'value="'. $wort10 .'"' : ""; ?>> in den Bauch. Wegen des Gewichts der Steine kann der Wolf nicht fliehen und stirbt. 
  </p>
  <p class="woerter"> Fehlende Wörter : Rotkäppchen, Weg, Mutter, Blumenstrauß, Jäger, Großmutters, Gestalt, Wolf, Steine, Goßmutter</p>
  <input type="submit" name="abgesendet" value="Lückentext absenden!">
  </form>
  <div id="phpausgabe">
<?php


if(isset($arr)){
for ($i = 0; $i <sizeof($arr); $i++ ) {
    print $arr[$i];    
}
}


?>
</div>
</main>


    </body>
</html>

Alles anzeigen

Gruß,
Stef

Arne Drews

Hallo,

Grundsätzlich solltest Du viel mehr mit Arrays arbeiten!
Kurze Frage, bevor ich meine Zeit in die falsche Richtung investiere: Muss es statisch sein oder darf die Prüfung der einzelnen Felder auch dynamisch, sprich mit JavaScript und Ajax passieren?

Zum Thema Arrays: Die kannst Du auch für POST-Daten verwenden.

HTML

<p>Ein kleines Mädchen, <input type="text" name="luecken[]" value="">, dem seine Großmutter einst eine rote Kappe geschenkt hat, wird von der <input type="text" name="luecken[]" value=""> geschickt, der in einem Haus im Wald wohnenden, bettlägerig kranken Großmutter einen Korb mit Leckereien (Kuchen und Wein) zu bringen. Die Mutter warnt Rotkäppchen eindringlich, es solle nicht vom <input type="text" name="luecken[]" value=""> abgehen. Im Wald lässt es sich auf ein Gespräch mit einem <input type="text" name="luecken[]" value=""> ein. Dieser horcht Rotkäppchen aus und macht es auf die schönen Blumen auf einer nahen Wiese aufmerksam, worauf Rotkäppchen beschließt, noch einen <input type="text" name="luecken[]" value=""> zu pflücken, der Warnung der Mutter zum Trotz. Der Wolf eilt geradewegs zur <input type="text" name="luecken[]" value=""> und frisst sie. Er legt sich in deren Nachthemd in ihr Bett und wartet auf Rotkäppchen. Bald darauf erreicht Rotkäppchen das Haus, tritt ein, und begibt sich an  <input type="text" name="luecken[]" value=""> Bett. Dort wundert sich Rotkäppchen über die  <input type="text" name="luecken[]" value=""> ihrer Großmutter, erkennt aber nicht den Wolf, bevor es ebenfalls gefressen wird.Großmutter und Rotkäppchen werden aber von einem  <input type="text" name="luecken[]" value=""> aus dem Bauch des Wolfes befreit. Der Jäger  füllt  dem Wolf  <input type="text" name="luecken[]" value=""> in den Bauch. Wegen des Gewichts der Steine kann der Wolf nicht fliehen und stirbt.

So hat der Lückentext auch mehr Sinn, weil niemand im Quelltext die Lösung nachlesen kann!

So eine POST-Übermittlung kannst Du dann problemlos in Kürze auf Fehler auswerten:

PHP

if ( isset($_POST['luecken']) ) {


    $matches = array(


            'Rotkäppchen',
            'Mutter',
            'Weg',
            'Wolf',
            'Blumenstrauß',
            'Goßmutter',
            'Großmutters',
            'Gestalt',
            'Jäger',
            'Steine'


        );


    $errors = array();


    foreach( $_POST['luecken'] as $key=>$val ) {


        $errors[] = ( $val !== $matches[$key] )? $key+1: false;


    }


    $errors = array_filter( $errors );


}

Alles anzeigen

Die Fehler selber kannst Du dann unten auch relativ einfach ausgeben:

PHP

if( isset($errors) && count($errors) > 0 ) {


    echo 'Fehler in Feldern: ' . implode( ', ', $errors );


}

Die korrekten Werte in die Lücken einzutragen, nach einem Reload ist auch nicht weiter aufwendig, habe ich jetzt aber mal weg gelassen, um beim Kern zu bleiben.

Im nächsten Step gilt es dann, die Wörter aus der Liste abzustreichen und die Felder bei Fehlern rot zu umranden.
Wenn das alles nach dem Klick auf Absenden passieren soll, benötigst Du glaube kein JavaScript/Ajax. Sollen die Werte aber beim Eintragen der Felder validiert und ausgewertet werden, benötigst Du das doch, daher warte ich zunächst mal, wie Du es gerne hättest.

Stef

Hey,

ok. In deinem Beispiel wird ja nicht geprüft ob das Formular abgesendet wurde. Man braucht es oder?

Aso wusste ich noch nicht. Ist ja ne gute Idee es so zu machen.

zum implode: Implode verbindet ja Array-Elemente zu einem String. Brauch man denn dabei dann keine schleife mehr? Dann könnte man ja theoretisch die arrayelemente immer mit implode ausgeben oder?

Zu dem script, hab ich dies richtig kommentiert:

PHP

if ( isset($_POST['luecken']) ) { //wenn eingabe in den feldern names luecken erfolgt ist


    $matches = array(  //$matches ,array mit den richtigen Wörtern zuordnen 


            'Rotkäppchen', 
            'Mutter', 
            'Weg', 
            'Wolf', 
            'Blumenstrauß', 
            'Goßmutter', 
            'Großmutters', 
            'Gestalt', 
            'Jäger', 
            'Steine' 


        ); 


    $errors = array();  //$errors ist ein array


    foreach( $_POST['luecken'] as $key=>$val ) { //für jede eingabe als schlüssel=>wert


        $errors[] = ( $val !== $matches[$key] )? $key+1: false; //füge wenn $val ungleich mit $matches[$key] (den richtigen Wörtern) dann addiere zu $key 1 sonst ist es falsch und füge es dem array $error[] hinzu


    } 


    $errors = array_filter( $errors );//array_filter. Filtert den array. Warum hast du den da angewendet ? 


}

Alles anzeigen

Wenn ich jetzt in den input feldern die richtigen wörter in die value speicher dann ist es doch nur für den, der es gemacht hat sichtbar, und wenn man dann alles wieder neu ladet dann ist die value wieder leer. Wo ist dann dabei das Problem?

Wenn ich jetzt einen Lückentext erstellen würde als Test, dann würde ich natürlich die richtigen wörter nicht in value speichern sondern die erfolgten fehler zählen und dann ausgeben mit Note.

Wenn es für dich möglich ist, würde ich gerne beide Beispiele sehen.

Gruß,
Stef

Arne Drews

Zitat

In deinem Beispiel wird ja nicht geprüft ob das Formular abgesendet wurde.

Doch, wird es! Ich frage nur nicht den Submit-Button ab, sondern ein Feld bzw. Index, den ich erwarte.

Zitat

Implode verbindet ja Array-Elemente zu einem String. Brauch man denn dabei dann keine schleife mehr?

Eine Schleife basiert lediglich auf einer Iteration, was implode() selbst auch macht, somit benötigst Du für diesen Zweck keine Schleife.

Zitat

Dann könnte man ja theoretisch die arrayelemente immer mit implode ausgeben oder?

Natürlich nur, wenn es darum geht, die Array-Elemente als String darzustellen.
Schleifen sind durchaus an vielen Stellen sinnvoll und manchmal auch unumgänglich. Ich versuche nur sie weitesgehend zu vermeiden, aber das ist keine fachliche Handlungsweise, sondern eine rein persönliche.
Ich mag Code mit lauter Schleifen nicht sonderlich, aber das ist mein Problem

Zitat

Zu dem script, hab ich dies richtig kommentiert:

Nicht ganz

PHP

if ( isset($_POST['luecken']) ) { // wenn im POST-Kanal ein Index 'luecken' vorhanden ist!


    $matches = array(  // $matches ,array mit den richtigen Wörtern zuordnen ( korrekt, die Reihenfolge ist wichtig! )


            'Rotkäppchen', 
            'Mutter', 
            'Weg', 
            'Wolf', 
            'Blumenstrauß', 
            'Großmutter', 
            'Großmutters', 
            'Gestalt', 
            'Jäger', 
            'Steine' 


        ); 


    $errors = array();  // $errors ist ein array ( korrekt! )


    foreach( $_POST['luecken'] as $key=>$val ) { // für jede eingabe als schlüssel=>wert ( korrekt! )


        $errors[] = ( $val !== $matches[$key] )? $key+1: false; //füge wenn $val ungleich mit $matches[$key] (den richtigen Wörtern) dann addiere zu $key 1 sonst ist es falsch und füge es dem array $error[] hinzu (ich glaube hier meinst Du das richtige )


    } 


    $errors = array_filter( $errors ); //array_filter. Filtert den array. ( Genau, array_filter() liefert für jedes Element aus $errors das Element zurück, sofern es nicht false oder null ist! Das heisst, ich habe nur noch die Fehler in dem Array... )


}

Alles anzeigen

Zitat

Wenn ich jetzt in den input feldern die richtigen wörter in die value speicher dann ist es doch nur für den, der es gemacht hat sichtbar, und wenn man dann alles wieder neu ladet dann ist die value wieder leer. Wo ist dann dabei das Problem?

Das Problem lag nicht in den value-Attributen, sondern darin, dass Du die Felder entsprechend den Wörtern benannt hast:

HTML

<input type="text" name="rotkaepchen" value="">

...da brauche ich nicht lange, um das richtige Wort aus der Liste zu suchen
Natürlich muss dafür jemand erstmal in den Quelltext schauen, aber warum nicht gleich das Problem umgehen?!

Zitat

Wenn ich jetzt einen Lückentext erstellen würde als Test, dann würde ich natürlich die richtigen wörter nicht in value speichern sondern die erfolgten fehler zählen und dann ausgeben mit Note.

Was der User eingegeben hat, kann ruhig in value wiedergegeben werden, warum nicht. Ist ja seine Eingabe und sagt erst mal nichts über die Richtigkeit aus.

Zitat

Wenn es für dich möglich ist, würde ich gerne beide Beispiele sehen.

Ich habe Dir mal fürs erste Dein Script umgebaut, so dass nach Absenden alle korrekten Worte in den values stehen, alle falschen Felder wieder leer aber rot umrandet und die richtig gesetzten Worte aus der Wortliste gestrichen sind. Dadurch hat sich der Quellcode jetzt ein klein wenig verändert, aber grundsätzlich ist alles, wie zuvor:

PHP

<?php
$matches = array(


        'Rotkäppchen',
        'Mutter',
        'Weg',
        'Wolf',
        'Blumenstrauß',
        'Großmutter',
        'Großmutters',
        'Gestalt',
        'Jäger',
        'Steine'


    );




$missing = $matches;
$result = array_fill( 0, count($matches), '' );
$class = $result;




if ( isset($_POST['luecken']) ) {


    $errors = array();


    foreach( $_POST['luecken'] as $key=>$val ) {


        if ( $val == $matches[$key] ) {


            $result[$key] = $val;
            $missing[$key] = '<span class="strike">' . $missing[$key] . '</span>';


        } else {


            $class[$key] = 'border-red';
            $errors[] = $key + 1;


        }


    }


}


sort( $missing );
?>
<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Lückentext</title>


            <style type="text/css">
                * {
                    margin: 0px;
                    padding: 0px;
                    font-family: Verdana,sans-serif;
                }


                h1{
                    margin-bottom: 10px;        
                }
                main{
                    width: 1000px;
                    margin: 40px auto;
                    background-color: rgba(73, 149, 156, 0.78);
                    padding: 20px;
                    border: 2px solid black;
                    border-radius: 30px;
                    box-shadow: 2px 2px 4px black;
                }
                p{
                    line-height: 30px;
                }


                p.woerter{
                    margin-top: 15px;
                    border: 1px solid black;
                    padding: 2.5px;
                    background-color: yellow;
                    text-align: center;
                }
                input[type='text']{
                    padding: 2.5px;
                }
                input[type='submit']{
                    padding: 20px;
                    margin-top: 15px;
                    transition: 1s;
                    border: none;
                }
                div#phpausgabe{
                    margin-top: 10px;
                    color: red;
                }


                input[type='submit']:hover
                {
                    background-color: gold;
                    cursor: pointer;
                    box-shadow: 0px 2px 5px black;
                }


                .border-red { border:2px dotted #f00; }
                SPAN.strike { font-style:italic; text-decoration:line-through; color:#ccc; }


            </style>
        </head>
    <body>
    <main>
    <h1>Lückentext</h1>
    <form method="post">
    <p>Ein kleines Mädchen, <input class="<?php echo $class[0]; ?>" type="text" name="luecken[]" value="<?php echo $result[0]; ?>">, dem seine Großmutter einst eine rote Kappe geschenkt hat, wird von der <input class="<?php echo $class[1]; ?>" type="text" name="luecken[]" value="<?php echo $result[1]; ?>"> geschickt, der in einem Haus im Wald wohnenden, bettlägerig kranken Großmutter einen Korb mit Leckereien (Kuchen und Wein) zu bringen. Die Mutter warnt Rotkäppchen eindringlich, es solle nicht vom <input class="<?php echo $class[2]; ?>" type="text" name="luecken[]" value="<?php echo $result[2]; ?>"> abgehen. Im Wald lässt es sich auf ein Gespräch mit einem <input class="<?php echo $class[3]; ?>" type="text" name="luecken[]" value="<?php echo $result[3]; ?>"> ein. Dieser horcht Rotkäppchen aus und macht es auf die schönen Blumen auf einer nahen Wiese aufmerksam, worauf Rotkäppchen beschließt, noch einen <input class="<?php echo $class[4]; ?>" type="text" name="luecken[]" value="<?php echo $result[4]; ?>"> zu pflücken, der Warnung der Mutter zum Trotz. Der Wolf eilt geradewegs zur <input class="<?php echo $class[5]; ?>" type="text" name="luecken[]" value="<?php echo $result[5]; ?>"> und frisst sie. Er legt sich in deren Nachthemd in ihr Bett und wartet auf Rotkäppchen. Bald darauf erreicht Rotkäppchen das Haus, tritt ein, und begibt sich an  <input class="<?php echo $class[6]; ?>" type="text" name="luecken[]" value="<?php echo $result[6]; ?>"> Bett. Dort wundert sich Rotkäppchen über die  <input class="<?php echo $class[7]; ?>" type="text" name="luecken[]" value="<?php echo $result[7]; ?>"> ihrer Großmutter, erkennt aber nicht den Wolf, bevor es ebenfalls gefressen wird.Großmutter und Rotkäppchen werden aber von einem  <input class="<?php echo $class[8]; ?>" type="text" name="luecken[]" value="<?php echo $result[8]; ?>"> aus dem Bauch des Wolfes befreit. Der Jäger  füllt  dem Wolf  <input class="<?php echo $class[9]; ?>" type="text" name="luecken[]" value="<?php echo $result[9]; ?>"> in den Bauch. Wegen des Gewichts der Steine kann der Wolf nicht fliehen und stirbt. 
  </p>
  <p class="woerter"> Fehlende Wörter : <?php echo implode(', ', $missing); ?></p>
  <input type="submit" name="abgesendet" value="Lückentext absenden!">
  </form>
  <div id="phpausgabe">
<?php


if ( isset($errors) && count($errors) > 0 ) {


    echo 'Fehler in folgenden Feldern: ' . implode( ', ', $errors );


}


?>
</div>
</main>


    </body>
</html>

Alles anzeigen

Der Vorteil der Array-Variante für die Input-Felder ist der, dass Du den Kernteil des PHP-Scriptes nicht erweitern/ändern musst, wenn Du mal Felder dazu nimmst oder entfernst.
Du erweiterst einfach den Text mit weiteren Input-Feldern und trägst entsprechend die Werte an der richtigen Stelle in $matches ein. Der Rest funktioniert weiterhin ohne Anpassungen...

Den PHP-Part habe ich hier nochmal grob dokumentiert:

PHP

// Array $matches mit den gesuchten Wörtern in der abgefragten Reihenfolge
$matches = array(


        'Rotkäppchen',
        'Mutter',
        'Weg',
        'Wolf',
        'Blumenstrauß',
        'Großmutter',
        'Großmutters',
        'Gestalt',
        'Jäger',
        'Steine'


    );




// Array $missing als fehlende Wortliste zunächst als Kopie von $matches
$missing = $matches;


// Array $result wird mit der Anzahl von Elementen des Array $matches deklariert und erstmal mit einem Leerstring belegt.
$result = array_fill( 0, count($matches), '' );


// Array $class stellt die CSS-Klasse dar für die spätere Umrandung
// Als Deklaration zunächst eine Kopie von $result
$class = $result;




// Abfrage, ob ein Element 'luecken' per POST übergeben wurde
if ( isset($_POST['luecken']) ) {


    // Array $errors als leeres Array deklarieren ( leer = keine Fehler )
    $errors = array();


    // $_POST['luecken'] ist ein Array, dessen Elemente sich auch den einzelnen Feldern zusammensetzt und 0 indexiert ist
    foreach( $_POST['luecken'] as $key=>$val ) {


        // wenn der Wert des Feldes ( $val ) dem gesuchten Wort aus $matches entspricht...
        if ( $val == $matches[$key] ) {


            // Das entsprechende Element in $result wird mit dem Wert aus dem Feld belegt
            $result[$key] = $val;


            // Das gesuchte Wort wird in der Liste der gesuchten Wörter mit einer CSS-Klasse belegt, so dass das Wort durchgestrichen dargestellt werden kann
            $missing[$key] = '<span class="strike">' . $missing[$key] . '</span>';


        // ...wenn nicht
        } else {


            // setze im Array $class das entsprechende Element auf den Wert 'border-red', um den Rahmen per CSS hervorzuheben
            $class[$key] = 'border-red';


            // Das Array $errors um ein Element erweitern, das dem Wert von $key + 1 entspricht
            $errors[] = $key + 1;


        }


    }


}


// hier sortiere ich $missing, damit die Reihenfolge der gesuchten Wörter nicht zwingend in der Reihenfolge steht, wie sie gesucht werden
sort( $missing );

Alles anzeigen

Ich denke mal, dass es das ist, was Du haben willst, daher spare ich mir den Javascript-Krams an dieser Stelle mal...

Wenn Du Fragen hast, tu' Dir keinen Zwang an

Gruß Arne

Stef

Hey,

Aso ok.

ja, da hast du recht. Habe garnicht daran gedacht.

Danke für das Kommentieren. Hilft mir sehr den Code zu verstehen.

Es funktioniert alles super danke.

Das arbeiten mit Arrays, ist für mich noch etwas neuland.

Gruß,
Stef

Tags