HTML input speichern, um es als Variable in Daten zu sehen

Question

Liebes SoSci Support Team,

ich habe mit einem HTML Code ein Sudoku (das ist die Version von einem kleinen 2*2 Sudoku) erstellt. Hier können die Teilnehmer auch in die Felder Werte eingeben, jedoch werden diese leider nicht gespeichert und ich sehe ihre Eingaben nicht. Was kann ich machen, damit mir diese Daten gespeichert werden?
Leider bin ich aus dem Internet nicht ganz schlau geworden und ich hoffe sehr, dass Sie mir helfen können...

Vielen Dank für Ihre Hilfe!!

Hier sehen Sie den HTML Code, welcher auch funktioniert in der Anzeige:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>HTML Sudoku </title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<style type="text/css">

  html, body {
    background-color: #FAFAFA
  }

  table {
    border: 2px solid #000000;
  }

  td {
    border: 1px solid #000000;
    text-align: center;
    vertical-align: middle;  
  }

  input {
    color: #000000;
    padding: 0;
    border: 0;
    text-align: center;
    width: 58px;
    height: 58px;
    font-size: 20px;
    background-color: #FFFFFF;
    outline: none;
  }

  input:disabled {
    background-color:  #c8c8c8;
  }

  #cell-0,  #cell-1  { border-top:    2px solid #000000; }
  #cell-1,  #cell-5 { border-right:  2px solid #000000; }
  #cell-4, #cell-5 { border-bottom: 2px solid #000000; }
  #cell-0,  #cell-4 { border-left:   2px solid #000000; }

  #cell-2,  #cell-3  { border-top:    2px solid #000000; }
  #cell-3,  #cell-7 { border-right:  2px solid #000000; }
  #cell-6, #cell-7 { border-bottom: 2px solid #000000; }
  #cell-2,  #cell-6 { border-left:   2px solid #000000; }

  #cell-8,  #cell-9  { border-top:    2px solid #000000; }
  #cell-9,  #cell-13 { border-right:  2px solid #000000; }
  #cell-12, #cell-13 { border-bottom: 2px solid #000000; }
  #cell-8,  #cell-12 { border-left:   2px solid #000000; }

  #cell-10, #cell-11 { border-top:    2px solid #000000; }
  #cell-11, #cell-15 { border-right:  2px solid #000000; }
  #cell-14, #cell-15 { border-bottom: 2px solid #000000; }
  #cell-10, #cell-14 { border-left:   2px solid #000000; }
 

</style>

<div class="container">
  
 

  <table id="grid">

    <tr>
      <td><input id="cell-0" type="text" value="2" disabled></td>
      <td><input id="cell-1" type="text" value="1" disabled></td>

      <td><input id="cell-2"  type="text"></td>
      <td><input id="cell-3"  type="text"></td>
                 
    </tr>

    <tr>
      <td><input id="cell-4" type="text"></td>
      <td><input id="cell-5" type="text" value="3" disabled></td>

      <td><input id="cell-6" type="text" value="2" disabled></td>
      <td><input id="cell-7" type="text"></td>
                        
    </tr>

    <tr>          
      <td><input id="cell-8" type="text"></td>
      <td><input id="cell-9" type="text"></td>

      <td><input id="cell-10" type="text"></td>          
      <td><input id="cell-11" type="text" value="4" disabled></td>
              
    </tr>

    <tr>          
      <td><input id="cell-12" type="text" value="1" disabled></td>
      <td><input id="cell-13" type="text"></td>

      <td><input id="cell-14" type="text"></td>     
      <td><input id="cell-15" type="text"></td>
     
    </tr>

  </table>

</div>

So sieht es mit dem Eingabefeld&Platzhaltern aus:

und so sah es zuvor aus:

Answer 1

Danke für den Pretest-Link. Ich poste meine Antwort der Übersichtlichkeit halber als neue Antwort. Wenn Sie einmal in den HTML-Code der Fragebogen-Seite mit dem Sudoku schauen, finden Sie für die ersten beiden Eingabefelder in der zweiten Zeile den folgenden HTML-Code:

        <tr>
          <td><input id="ZE01_04" name="ZE01_04" tabindex="50" type="text" style="width: 58px;" autocomplete="section-ZE01 survey-400-ZE01_04"> </td>
          <td><input id="cell-5" type="text" value="3" disabled=""></td>
          <!-- ... -->
        </tr>

Das erste <input> ist von SoSci Survey, das zweite hatten Sie eingefügt. Und das zweite hat den extra-breiten Rahmen, der hier mittels CSS definiert wurde:

#cell-4, #cell-5 {
    border-bottom: 2px solid #000000;
}
#cell-1, #cell-5 {
    border-right: 2px solid #000000;
}

Sie sehen, die Definition erfolgt über das ID im HTML-Tag und die Verwendung dieser ID im CSS-Code. Die Zählung der Zellen beginnt bei 0, daher hat die sechste Zelle die Kennung "cell-5".

Im Prinzip müssen Sie nun also im CSS-Code nur die IDs "korrigieren". Statt "cell-4" muss dort (mehrfach) "ZE01_04" stehen, also z.B.

#ZE01_04, #cell-5 {
    border-bottom: 2px solid #000000;
}

Das #-Zeichen besagt nur, dass es um eine ID geht.

Wenn Sie das anpassen, sollten die Rahmen wieder passen.

Comments

Vielen vielen Dank für die Hilfe!! Ich habe alles so umsetzen können und es scheint genau so zu funktionieren, wie ich es mir vorgestellt hatte! Ohne Ihre Hilfe hätte ich das aber so niemals hinbekommen... DANKE! :)

Answer 2

Ersetzen Sie die <input>-Elemente bitte gegen Platzhalter für Eingabefelder.

Die "disabled" Felder können Sie natürlich so belassen, wie sie sind.

Comments

Ich habe Ihren Vorschlag umgesetzt und die Werte werden jetzt auch gespeichert. Jedoch können die Teilnehmer die Größe der Felder verändern (obwohl ich 58px in der Höhe und Breite eingegeben habe..) und das Layout hat sich leider auch so verändert, sodass die 4 Blöcke nicht mehr mit einer dicken Linie getrennt sind..
Außerdem erscheinen die Zahlen sehr klein und linksbündig, was bei dem großen Sudoku schwer zu lesen sein wird..
Können Sie mir bei diesen Problemen auch noch weiterhelfen?

---

> obwohl ich 58px in der Höhe und Breite eingegeben habe

Lassen Sie die Höhenangabe weg - sonst erstellt SoSci Survey ein mehrzeiles Eingabefeld <textarea> statt dem normalen <input>

> Außerdem erscheinen die Zahlen sehr klein und linksbündig, was bei dem großen Sudoku schwer zu lesen sein wird..

Die Textgröße können Sie mittels CSS festlegen. Wenn Sie einen Pretest-Link direkt (!) zur betroffenen Seite posten, kann ich da gerne weiterhelfen.

---

super, die Höhe wegzulassen hat geklappt & dadurch ist die Schriftgröße/Ausrichtung auch analog zu den anderen Zahlen (siehe neues Foto oben)!
Jetzt geht es eigentlich nur noch um die Ränder der Eingabefelder, dass die Unterteilung vom Sudoku gut zu erkennen ist. Sie müssen nicht unbedingt so dick wie auf dem anderen Foto sein, es soll hauptsächlich nur eine Unterteilung erkennbar sein..

Hilft Ihnen hierfür auch der Pretest-Link weiter?

---

Immer her damit, dann kann ich mir ein Bild des Ist-Zustands machen.

Vermutlich reicht es, wenn man den Tabellenzellen (td) einen Rahmen verpasst, als z.B.

pageCSS('
  td { border: 2px solid black; }
');

... oder den Eingabefelden (input). Aber das werden wir dann noch ein wenig einschränken müssen, damit es nur das Sudoku betrifft und nicht die ganze Seite. Und natürlich müssen die Rahmen noch auf die passenden Element eingeschränkt werden.

Mehr dann mit dem Pretest-Link :)

---

https://sosci.univie.ac.at/SudokuTest/?act=y6l9Hk3I4H4MgcK5dzelho4r

Ich habe einen Fragebogen nur mit dem Sudoku und der anschließenden Frage darunter gemacht. Ich hoffe Sie können Ihn öffnen!

Und hier ist noch der aktuelle Code dazu:
Bitte sehen Sie sich nun dieses Sudoku an:
<br>
<br>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

 <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>HTML Sudoku </title>
    
    
    
    <style type="text/css">
    
      html, body {
        background-color: #FAFAFA
      }

      table {
        border: 2px solid #000000;
      }

      td {
        border: 1px solid #000000;
        text-align: center;
        vertical-align: middle;  
      }

      input {
        color: #000000;
        padding: 0;
        border: 0;
        text-align: center;
        width: 58px;
        height: 58px;
        font-size: 20px;
        background-color: #FFFFFF;
        outline: none;
      }

      input:disabled {
        background-color:  #c8c8c8;
      }

      #cell-0,  #cell-1  { border-top:    2px solid #000000; }
      #cell-1,  #cell-5 { border-right:  2px solid #000000; }
      #cell-4, #cell-5 { border-bottom: 2px solid #000000; }
      #cell-0,  #cell-4 { border-left:   2px solid #000000; }

      #cell-2,  #cell-3  { border-top:    2px solid #000000; }
      #cell-3,  #cell-7 { border-right:  2px solid #000000; }
      #cell-6, #cell-7 { border-bottom: 2px solid #000000; }
      #cell-2,  #cell-6 { border-left:   2px solid #000000; }

      #cell-8,  #cell-9  { border-top:    2px solid #000000; }
      #cell-9,  #cell-13 { border-right:  2px solid #000000; }
      #cell-12, #cell-13 { border-bottom: 2px solid #000000; }
      #cell-8,  #cell-12 { border-left:   2px solid #000000; }

      #cell-10, #cell-11 { border-top:    2px solid #000000; }
      #cell-11, #cell-15 { border-right:  2px solid #000000; }
      #cell-14, #cell-15 { border-bottom: 2px solid #000000; }
      #cell-10, #cell-14 { border-left:   2px solid #000000; }
     
    
    </style>



    <div class="container">
      
     

      <table id="grid">

        <tr>
          <td><input id="cell-0" type="text" value="2" disabled></td>
          <td><input id="cell-1" type="text" value="1" disabled></td>

          <td>  %input:ZE01_02%</td>
          <td>  %input:ZE01_03% </td>
                              
        </tr>

        <tr>
          <td>  %input:ZE01_04% </td>
          <td><input id="cell-5" type="text" value="3" disabled></td>

          <td><input id="cell-6" type="text" value="2" disabled></td>
          <td>  %input:ZE01_07% </td>
                            
        </tr>

        <tr>          
          <td>  %input:ZE01_08% </td>
          <td>  %input:ZE01_09% </td>

          <td>  %input:ZE01_10% </td>          
          <td><input id="cell-11" type="text" value="4" disabled></td>
                  
        </tr>

        <tr>          
          <td><input id="cell-12" type="text" value="1" disabled></td>
          <td>  %input:ZE01_13% </td>

          <td>  %input:ZE01_14% </td>   
          <td>  %input:ZE01_15% </td>
         
        </tr>

  
      </table>

    </div>



<br>

---

S. neue Antwort https://support.soscisurvey.de/?qa=30788/html-input-speichern-um-es-als-variable-in-daten-zu-sehen&show=30895#a30895