Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="detHele1">
  
<!-- A --> 
  <input id="letterA" type="checkbox"/>
  <label id="letterAbutton" for="letterA" class="tooltip grid-item button3">
    <div class="buttonTxt">1🏆<br>⭐</div>
    <span class="tooltiptext">Skriv det<br>manglende tal</span>
  </label> 
  
  <div id="letterAbox" class="show1">
    <div class="item-1">
      <!-- onclick="closeA()" hører til dette label hvis functionen skal bruges -->
      <label id="closeA" class="close-btn1" type="checkbox" for="letterA">&times;</label>
      
      <div id="bogstaver1" class="bogstaver1" for="closeA">
        
        <div class="tegn1">1 + 0 =</div>
        <input id="numberA1" type="text" class="checkbox1" for="closeA"/>
        <button class="decode1" onclick="calculateA1()">✔</button>
        <input class="svar1" type="text" name="feedbackA1" id="feedbackA1" readonly>
        
        <div class="tegn1">0 + 2 =</div>
        <input id="numberA2" type="text" class="checkbox1" for="closeA"/>
        <button class="decode1" onclick="calculateA2()">✔</button>
        <input class="svar1" type="text" name="feedbackA2" id="feedbackA2" readonly>
        
        <div class="tegn1">1 + 1 =</div>
        <input id="numberA3" type="text" class="checkbox1" for="closeA"/>
        <button class="decode1" onclick="calculateA3()">✔</button>
        <input class="svar1" type="text" name="feedbackA3" id="feedbackA3" readonly>
        
        <div class="tegn1">1 + 2 =</div>
        <input id="numberA4" type="text" class="checkbox1" for="closeA"/>
        <button class="decode1" onclick="calculateA4()">✔</button>
        <input class="svar1" type="text" name="feedbackA4" id="feedbackA4" readonly>
      </div>
      
    </div>
    <button class="decode0" onclick="resultat1()" for="closeA">I ALT</button>
    <input class="resultat1" type="text" name="visresultat1" id="visresultat1" for="letterAbox" readonly>
    
  </div>
  <div id="overlayA" class="popup1" for="letterA"></div>
  
<!-- B --> 
  <input id="letterB" type="checkbox"/>
  <label id="letterBbutton" for="letterB" class="tooltip grid-item button3">
    <div class="buttonTxt">2🏆<br>⭐</div>
    <span class="tooltiptext">Skriv det<br>manglende tal</span> 
  </label> 
  
  <div id="letterBbox" class="show1">
    <div class="item-1">
      <!-- onclick="closeB()" hører til dette label hvis functionen skal bruges -->
      <label id="closeB" class="close-btn1" type="checkbox" for="letterB">&times;</label>
      
      <div id="bogstaver2" class="bogstaver1" for="closeB">
        
        <div class="tegn1">2 + 2 =</div>
        <input id="numberB1" type="text" class="checkbox1" for="closeB"/>
        <button class="decode1" onclick="calculateB1()">✔</button>
        <input class="svar1" type="text" name="feedbackB1" id="feedbackB1" readonly>
        
        <div class="tegn1">2 + 1 =</div>
        <input id="numberB2" type="text" class="checkbox1" for="closeB"/>
        <button class="decode1" onclick="calculateB2()">✔</button>
        <input class="svar1" type="text" name="feedbackB2" id="feedbackB2" readonly>
        
        <div class="tegn1">1 + 3 =</div>
        <input id="numberB3" type="text" class="checkbox1" for="closeB"/>
        <button class="decode1" onclick="calculateB3()">✔</button>
        <input class="svar1" type="text" name="feedbackB3" id="feedbackB3" readonly>
        
        <div class="tegn1">0 + 3 =</div>
        <input id="numberB4" type="text" class="checkbox1" for="closeB"/>
        <button class="decode1" onclick="calculateB4()">✔</button>
        <input class="svar1" type="text" name="feedbackB4" id="feedbackB4" readonly>
        
      </div>
      
    </div>
    <button class="decode0" onclick="resultat2()" for="closeB">I ALT</button>
    <input class="resultat2" type="text" name="visresultat2" id="visresultat2" for="letterBbox" readonly>

  </div> 
  <div id="overlayB" class="popup1" for="letterB"></div>
  
<!-- C --> 
  <input id="letterC" type="checkbox"/>
  <label id="letterCbutton" for="letterC" class="tooltip grid-item button3">
    <div class="buttonTxt">3🏆<br>⭐</div>
    <span class="tooltiptext">Skriv det<br>manglende tal</span> 
  </label> 
  
  <div id="letterCbox" class="show1">
    <div class="item-1">
      <!-- onclick="closeC()" hører til dette label hvis functionen skal bruges -->
      <label id="closeC" class="close-btn1" type="checkbox" for="letterC">&times;</label>
      
      <div id="bogstaver3" class="bogstaver3" for="closeC">
        
        <div class="tegn1">0 + 4 =</div>
        <input id="numberC1" type="text" class="checkbox3" for="closeC"/>
        <button class="decode1" onclick="calculateC1()">✔</button>
        <input class="svar1" type="text" name="feedbackC1" id="feedbackC1" readonly>
        
        <div class="tegn1">5 + 0 =</div>
        <input id="numberC2" type="text" class="checkbox3" for="closeC"/>
        <button class="decode1" onclick="calculateC2()">✔</button>
        <input class="svar1" type="text" name="feedbackC2" id="feedbackC2" readonly>
        
        <div class="tegn1">2 + 3 =</div>
        <input id="numberC3" type="text" class="checkbox3" for="closeC"/>
        <button class="decode1" onclick="calculateC3()">✔</button>
        <input class="svar1" type="text" name="feedbackC3" id="feedbackC3" readonly>
        
        <div class="tegn1">4 + 1 =</div>
        <input id="numberC4" type="text" class="checkbox3" for="closeC"/>
        <button class="decode1" onclick="calculateC4()">✔</button>
        <input class="svar1" type="text" name="feedbackC4" id="feedbackC4" readonly>
        
      </div>
      
    </div>
    <button class="decode0" onclick="resultat3()" for="closeC">I ALT</button>
    <input class="resultat3" type="text" name="visresultat3" id="visresultat3" for="letterCbox" readonly>
    
  </div>
  <div id="overlayC" class="popup1" for="letterC"></div>
  
<!-- D --> 
  <input id="letterD" type="checkbox"/>
  <label id="letterDbutton" for="letterD" class="tooltip grid-item button3">
    <div class="buttonTxt">4🏆<br>⭐</div>
    <span class="tooltiptext">Skriv det<br>manglende tal</span>
  </label> 
  
  <div id="letterDbox" class="show1">
    <div class="item-1">
      <!-- onclick="closeD()" hører til dette label hvis functionen skal bruges -->
      <label id="closeD" class="close-btn1" type="checkbox" for="letterD">&times;</label>
      
      <div id="bogstaver4" class="bogstaver1" for="closeD">
        
        <div class="tegn1">0 + 6 =</div>
        <input id="numberD1" type="text" class="checkbox4" for="closeD"/>
        <button class="decode1" onclick="calculateD1()">✔</button>
        <input class="svar1" type="text" name="feedbackD1" id="feedbackD1" readonly>
        
        <div class="tegn1">1 + 5 =</div>
        <input id="numberD2" type="text" class="checkbox4" for="closeD"/>
        <button class="decode1" onclick="calculateD2()">✔</button>
        <input class="svar1" type="text" name="feedbackD2" id="feedbackD2" readonly>
        
        <div class="tegn1">3 + 3 =</div>
        <input id="numberD3" type="text" class="checkbox4" for="closeD"/>
        <button class="decode1" onclick="calculateD3()">✔</button>
        <input class="svar1" type="text" name="feedbackD3" id="feedbackD3" readonly>
        
        <div class="tegn1">2 + 4 =</div>
        <input id="numberD4" type="text" class="checkbox4" for="closeD"/>
        <button class="decode1" onclick="calculateD4()">✔</button>
        <input class="svar1" type="text" name="feedbackD4" id="feedbackD4" readonly>
        
      </div>
      
    </div>
    <button class="decode0" onclick="resultat4()" for="closeD">I ALT</button>
    <input class="resultat4" type="text" name="visresultat4" id="visresultat4" for="letterDbox" readonly>
    
  </div>
  <div id="overlayD" class="popup1" for="letterD"></div>
  
<!-- E --> 
  <input id="letterE" type="checkbox"/>
  <label id="letterEbutton" for="letterE" class="tooltip grid-item button3">
    <div class="buttonTxt">5🏆<br>⭐</div>
    <span class="tooltiptext">Skriv det<br>manglende tal</span>
  </label> 
  
  <div id="letterEbox" class="show1">
    <div class="item-1">
      <!-- onclick="closeE()" hører til dette label hvis functionen skal bruges -->
      <label id="closeE" class="close-btn1" type="checkbox" for="letterE">&times;</label>
      
      <div id="bogstaver5" class="bogstaver1" for="closeE">
        
        <div class="tegn1">7 + 0 =</div>
        <input id="numberE1" type="text" class="checkbox5" for="closeE"/>
        <button class="decode1" onclick="calculateE1()">✔</button>
        <input class="svar1" type="text" name="feedbackE1" id="feedbackE1" readonly>
        
        <div class="tegn1">2 + 5 =</div>
        <input id="numberE2" type="text" class="checkbox5" for="closeE"/>
        <button class="decode1" onclick="calculateE2()">✔</button>
        <input class="svar1" type="text" name="feedbackE2" id="feedbackE2" readonly>
        
        <div class="tegn1">1 + 6 =</div>
        <input id="numberE3" type="text" class="checkbox5" for="closeE"/>
        <button class="decode1" onclick="calculateE3()">✔</button>
        <input class="svar1" type="text" name="feedbackE3" id="feedbackE3" readonly>
        
        <div class="tegn1">3 + 4 =</div>
        <input id="numberE4" type="text" class="checkbox5" for="closeE"/>
        <button class="decode1" onclick="calculateE4()">✔</button>
        <input class="svar1" type="text" name="feedbackE4" id="feedbackE4" readonly>
        
      </div>
      
    </div>
    <button class="decode0" onclick="resultat5()" for="closeE">I ALT</button>
    <input class="resultat5" type="text" name="visresultat5" id="visresultat5" for="letterEbox" readonly>
    
  </div> 
  <div id="overlayE"  class="popup1" for="letterE"></div>
  
<!-- F --> 
  <input id="letterF" type="checkbox"/>
  <label id="letterFbutton" for="letterF" class="tooltip grid-item button3">
    <div class="buttonTxt">6🏆<br>⭐⭐</div>
    <span class="tooltiptext">Skriv det<br>manglende tal</span> 
  </label> 
  
  <div id="letterFbox" class="show1">
    <div class="item-1">
      <!-- onclick="closeF()" hører til dette label hvis functionen skal bruges -->
      <label id="closeF" class="close-btn1" type="checkbox" for="letterF">&times;</label>
      
      <div id="bogstaver6" class="bogstaver1" for="closeF">
        
        <div class="tegn1">0 + 8 =</div>
        <input id="numberF1" type="text" class="checkbox6" for="closeF"/>
        <button class="decode1" onclick="calculateF1()">✔</button>
        <input class="svar1" type="text" name="feedbackF1" id="feedbackF1" readonly>
        
        <div class="tegn1">4 + 4 =</div>
        <input id="numberF2" type="text" class="checkbox6" for="closeF"/>
        <button class="decode1" onclick="calculateF2()">✔</button>
        <input class="svar1" type="text" name="feedbackF2" id="feedbackF2" readonly>
        
        <div class="tegn1">2 + 6 =</div>
        <input id="numberF3" type="text" class="checkbox6" for="closeF"/>
        <button class="decode1" onclick="calculateF3()">✔</button>
        <input class="svar1" type="text" name="feedbackF3" id="feedbackF3" readonly>
        
        <div class="tegn1">3 + 5 =</div>
        <input id="numberF4" type="text" class="checkbox6" for="closeF"/>
        <button class="decode1" onclick="calculateF4()">✔</button>
        <input class="svar1" type="text" name="feedbackF4" id="feedbackF4" readonly>
        
      </div>
      
    </div>
    <button class="decode0" onclick="resultat6()" for="closeF">I ALT</button>
    <input class="resultat6" type="text" name="visresultat6" id="visresultat6" for="letterFbox" readonly>
    
  </div> 
  <div id="overlayF" class="popup1" for="letterF"></div>
  
<!-- G --> 
  <input id="letterG" type="checkbox"/>
  <label id="letterGbutton" for="letterG" class="tooltip grid-item button3">
    <div class="buttonTxt">7🏆<br>⭐⭐</div>
    <span class="tooltiptext">Skriv det<br>manglende tal</span> 
  </label> 
  
  <div id="letterGbox" class="show1">
    <div class="item-1">
      <!-- onclick="closeG()" hører til dette label hvis functionen skal bruges -->
      <label id="closeG" class="close-btn1" type="checkbox" for="letterG">&times;</label>
      
      <div id="bogstaver7" class="bogstaver1" for="closeG">
        
        <div class="tegn1">9 + 0 =</div>
        <input id="numberG1" type="text" class="checkbox7" for="closeG"/>
        <button class="decode1" onclick="calculateG1()">✔</button>
        <input class="svar1" type="text" name="feedbackG1" id="feedbackG1" readonly>
        
        <div class="tegn1">1 + 8 =</div>
        <input id="numberG2" type="text" class="checkbox7" for="closeG"/>
        <button class="decode1" onclick="calculateG2()">✔</button>
        <input class="svar1" type="text" name="feedbackG2" id="feedbackG2" readonly>
        
        <div class="tegn1">3 + 6 =</div>
        <input id="numberG3" type="text" class="checkbox7" for="closeG"/>
        <button class="decode1" onclick="calculateG3()">✔</button>
        <input class="svar1" type="text" name="feedbackG3" id="feedbackG3" readonly>
        
        <div class="tegn1">5 + 4 =</div>
        <input id="numberG4" type="text" class="checkbox7" for="closeG"/>
        <button class="decode1" onclick="calculateG4()">✔</button>
        <input class="svar1" type="text" name="feedbackG4" id="feedbackG4" readonly>
        
      </div>
      
    </div>
    <button class="decode0" onclick="resultat7()" for="closeG">I ALT</button>
    <input class="resultat7" type="text" name="visresultat7" id="visresultat7" for="letterGbox" readonly>
    
  </div>
  <div id="overlayG" class="popup1" for="letterG"></div>
  
<!-- H --> 
  <input id="letterH" type="checkbox"/>
  <label id="letterHbutton" for="letterH" class="tooltip grid-item button3">
    <div class="buttonTxt">8🏆<br>⭐⭐</div>
    <span class="tooltiptext">Skriv det<br>manglende tal</span> 
  </label> 
  
  <div id="letterHbox" class="show1">
    <div class="item-1">
      <!-- onclick="closeH()" hører til dette label hvis functionen skal bruges -->
      <label id="closeH" class="close-btn1" type="checkbox" for="letterH">&times;</label>
      
      <div id="bogstaver8" class="bogstaver1" for="closeH">
        
        <div class="tegn1">3 + 1 =</div>
        <input id="numberH1" type="text" class="checkbox8" for="closeH"/>
        <button class="decode1" onclick="calculateH1()">✔</button>
        <input class="svar1" type="text" name="feedbackH1" id="feedbackH1" readonly>
        
        <div class="tegn1">3 + 2 =</div>
        <input id="numberH2" type="text" class="checkbox8" for="closeH"/>
        <button class="decode1" onclick="calculateH2()">✔</button>
        <input class="svar1" type="text" name="feedbackH2" id="feedbackH2" readonly>
        
        <div class="tegn1">5 + 1 =</div>
        <input id="numberH3" type="text" class="checkbox8" for="closeH"/>
        <button class="decode1" onclick="calculateH3()">✔</button>
        <input class="svar1" type="text" name="feedbackH3" id="feedbackH3" readonly>
        
        <div class="tegn1">2 + 4 =</div>
        <input id="numberH4" type="text" class="checkbox8" for="closeH"/>
        <button class="decode1" onclick="calculateH4()">✔</button>
        <input class="svar1" type="text" name="feedbackH4" id="feedbackH4" readonly>
        
      </div>
      
    </div>
    <button class="decode0" onclick="resultat8()" for="closeH">I ALT</button>
    <input class="resultat8" type="text" name="visresultat8" id="visresultat8" for="letterHbox" readonly>
    
  </div>
  <div id="overlayH" class="popup1" for="letterH"></div>
  
<!-- I --> 
  <input id="letterI" type="checkbox"/>
  <label id="letterIbutton" for="letterI" class="tooltip grid-item button3">
    <div class="buttonTxt">9🏆<br>⭐⭐</div>
    <span class="tooltiptext">Skriv det<br>manglende tal</span> 
  </label> 
  
  <div id="letterIbox" class="show1">
    <div class="item-1">
      <!-- onclick="closeI()" hører til dette label hvis functionen skal bruges -->
      <label id="closeI" class="close-btn1" type="checkbox" for="letterI">&times;</label>
      
      <div id="bogstaver9" class="bogstaver1" for="closeI">
        
        <div class="tegn1">6 + 1 =</div>
        <input id="numberI1" type="text" class="checkbox9" for="closeI"/>
        <button class="decode1" onclick="calculateI1()">✔</button>
        <input class="svar1" type="text" name="feedbackI1" id="feedbackI1" readonly>
        
        <div class="tegn1">5 + 2 =</div>
        <input id="numberI2" type="text" class="checkbox9" for="closeI"/>
        <button class="decode1" onclick="calculateI2()">✔</button>
        <input class="svar1" type="text" name="feedbackI2" id="feedbackI2" readonly>
        
        <div class="tegn1">3 + 4 =</div>
        <input id="numberI3" type="text" class="checkbox9" for="closeI"/>
        <button class="decode1" onclick="calculateI3()">✔</button>
        <input class="svar1" type="text" name="feedbackI3" id="feedbackI3" readonly>
        
        <div class="tegn1">8 + 1 =</div>
        <input id="numberI4" type="text" class="checkbox9" for="closeI"/>
        <button class="decode1" onclick="calculateI4()">✔</button>
        <input class="svar1" type="text" name="feedbackI4" id="feedbackI4" readonly>
        
      </div>
      
    </div>
    <button class="decode0" onclick="resultat9()" for="closeI">I ALT</button>
    <input class="resultat9" type="text" name="visresultat9" id="visresultat9" for="letterIbox" readonly>
    
  </div>
  <div id="overlayI" class="popup1" for="letterI"></div>
  
<!-- J --> 
  <input id="letterJ" type="checkbox"/>
  <label id="letterJbutton" for="letterJ" class="tooltip grid-item button3">
    <div class="buttonTxt">10🏆<br>⭐⭐</div>
    <span class="tooltiptext">Skriv det<br>manglende tal</span>
  </label> 
  
  <div id="letterJbox" class="show1">
    <div class="item-1">
      <!-- onclick="closeJ()" hører til dette label hvis functionen skal bruges -->
      <label id="closeJ" class="close-btn1" type="checkbox" for="letterJ">&times;</label>
      
      <div id="bogstaver10" class="bogstaver1" for="closeJ">
        
        <div class="tegn1">3 + 5 =</div>
        <input id="numberJ1" type="text" class="checkbox10" for="closeJ"/>
        <button class="decode1" onclick="calculateJ1()">✔</button>
        <input class="svar1" type="text" name="feedbackJ1" id="feedbackJ1" readonly>
        
        <div class="tegn1">6 + 2 =</div>
        <input id="numberJ2" type="text" class="checkbox10" for="closeJ"/>
        <button class="decode1" onclick="calculateJ2()">✔</button>
        <input class="svar1" type="text" name="feedbackJ2" id="feedbackJ2" readonly>
        
        <div class="tegn1">1 + 7 =</div>
        <input id="numberJ3" type="text" class="checkbox10" for="closeJ"/>
        <button class="decode1" onclick="calculateJ3()">✔</button>
        <input class="svar1" type="text" name="feedbackJ3" id="feedbackJ3" readonly>
        
        <div class="tegn1">2 + 7 =</div>
        <input id="numberJ4" type="text" class="checkbox10" for="closeJ"/>
        <button class="decode1" onclick="calculateJ4()">✔</button>
        <input class="svar1" type="text" name="feedbackJ4" id="feedbackJ4" readonly>
        
      </div>
      
    </div>
    <button class="decode0" onclick="resultat10()" for="closeJ">I ALT</button>
    <input class="resultat10" type="text" name="visresultat10" id="visresultat10" for="letterJbox" readonly>
    
  </div>
  <div id="overlayJ" class="popup1" for="letterJ"></div>
  
<!-- K --> 
  <input id="letterK" type="checkbox"/>
  <label id="letterKbutton" for="letterK" class="tooltip grid-item button3">
    <div class="buttonTxt">11🏆<br>⭐⭐⭐</div>
    <span class="tooltiptext">Skriv det<br>manglende tal</span> 
  </label> 
  
  <div id="letterKbox" class="show1">
    <div class="item-1">
      <!-- onclick="closeK()" hører til dette label hvis functionen skal bruges -->
      <label id="closeK" class="close-btn1" type="checkbox" for="letterK">&times;</label>
      
      <div id="bogstaver11" class="bogstaver1" for="closeK">
        
        <div class="tegn1">4 + 5 =</div>
        <input id="numberK1" type="text" class="checkbox11" for="closeK"/>
        <button class="decode1" onclick="calculateK1()">✔</button>
        <input class="svar1" type="text" name="feedbackK1" id="feedbackK1" readonly>
        
        <div class="tegn1">6 + 3 =</div>
        <input id="numberK2" type="text" class="checkbox11" for="closeK"/>
        <button class="decode1" onclick="calculateK2()">✔</button>
        <input class="svar1" type="text" name="feedbackK2" id="feedbackK2" readonly>
        
        <div class="tegn1">7 + 2 =</div>
        <input id="numberK3" type="text" class="checkbox11" for="closeK"/>
        <button class="decode1" onclick="calculateK3()">✔</button>
        <input class="svar1" type="text" name="feedbackK3" id="feedbackK3" readonly>
        
        <div class="tegn1">8 + 1 =</div>
        <input id="numberK4" type="text" class="checkbox11" for="closeK"/>
        <button class="decode1" onclick="calculateK4()">✔</button>
        <input class="svar1" type="text" name="feedbackK4" id="feedbackK4" readonly>
        
      </div>
      
    </div>
    <button class="decode0" onclick="resultat11()" for="closeK">I ALT</button>
    <input class="resultat11" type="text" name="visresultat11" id="visresultat11" for="letterKbox" readonly>
    
  </div>
  <div id="overlayK" class="popup1" for="letterK"></div>
  
<!-- L --> 
  <input id="letterL" type="checkbox"/>
  <label id="letterLbutton" for="letterL" class="tooltip grid-item button3">
    <div class="buttonTxt">12🏆<br>⭐⭐⭐</div>
    <span class="tooltiptext">Skriv det<br>manglende tal</span> 
  </label> 
  
  <div id="letterLbox" class="show1">
    <div class="item-1">
      <!-- onclick="closeL()" hører til dette label hvis functionen skal bruges -->
      <label id="closeL" class="close-btn1" type="checkbox" for="letterL">&times;</label>
      
      <div id="bogstaver12" class="bogstaver1" for="closeL">
        
        <div class="tegn1">10 + 0 =</div>
        <input id="numberL1" type="text" class="checkbox12" for="closeL"/>
        <button class="decode1" onclick="calculateL1()">✔</button>
        <input class="svar1" type="text" name="feedbackL1" id="feedbackL1" readonly>
        
        <div class="tegn1">1 + 9 =</div>
        <input id="numberL2" type="text" class="checkbox12" for="closeL"/>
        <button class="decode1" onclick="calculateL2()">✔</button>
        <input class="svar1" type="text" name="feedbackL2" id="feedbackL2" readonly>
        
        <div class="tegn1">8 + 2 =</div>
        <input id="numberL3" type="text" class="checkbox12" for="closeL"/>
        <button class="decode1" onclick="calculateL3()">✔</button>
        <input class="svar1" type="text" name="feedbackL3" id="feedbackL3" readonly>
        
        <div class="tegn1">3 + 7 =</div>
        <input id="numberL4" type="text" class="checkbox12" for="closeL"/>
        <button class="decode1" onclick="calculateL4()">✔</button>
        <input class="svar1" type="text" name="feedbackL4" id="feedbackL4" readonly>
        
      </div>
      
    </div>
    <button class="decode0" onclick="resultat12()" for="closeL">I ALT</button>
    <input class="resultat12" type="text" name="visresultat12" id="visresultat12" for="letterLbox" readonly>
    
  </div>
  <div id="overlayL" class="popup1" for="letterL"></div>
  
<!-- M --> 
  <input id="letterM" type="checkbox"/>
  <label id="letterMbutton" for="letterM" class="tooltip grid-item button3">
    <div class="buttonTxt">13🏆<br>⭐⭐⭐</div>
    <span class="tooltiptext">Skriv det<br>manglende tal</span> 
  </label> 
  
  <div id="letterMbox" class="show1">
    <div class="item-1">
      <!-- onclick="closeM()" hører til dette label hvis functionen skal bruges -->
      <label id="closeM" class="close-btn1" type="checkbox" for="letterM">&times;</label>
      
      <div id="bogstaver13" class="bogstaver1" for="closeM">
        
        <div class="tegn1">9 + 1 =</div>
        <input id="numberM1" type="text" class="checkbox13" for="closeM"/>
        <button class="decode1" onclick="calculateM1()">✔</button>
        <input class="svar1" type="text" name="feedbackM1" id="feedbackM1" readonly>
        
        <div class="tegn1">8 + 2 =</div>
        <input id="numberM2" type="text" class="checkbox13" for="closeM"/>
        <button class="decode1" onclick="calculateM2()">✔</button>
        <input class="svar1" type="text" name="feedbackM2" id="feedbackM2" readonly>
        
        <div class="tegn1">7 + 3 =</div>
        <input id="numberM3" type="text" class="checkbox13" for="closeM"/>
        <button class="decode1" onclick="calculateM3()">✔</button>
        <input class="svar1" type="text" name="feedbackM3" id="feedbackM3" readonly>
        
        <div class="tegn1">6 + 4 =</div>
        <input id="numberM4" type="text" class="checkbox13" for="closeM"/>
        <button class="decode1" onclick="calculateM4()">✔</button>
        <input class="svar1" type="text" name="feedbackM4" id="feedbackM4" readonly>
        
      </div>
      
    </div>
    <button class="decode0" onclick="resultat13()" for="closeM">I ALT</button>
    <input class="resultat13" type="text" name="visresultat13" id="visresultat13" for="letterMbox" readonly>
    
  </div>
  <div id="overlayM" class="popup1" for="letterM"></div>
  
<!-- N -->  
  <input id="letterN" type="checkbox"/>
  <label id="letterNbutton" for="letterN" class="tooltip grid-item button3">
    <div class="buttonTxt">14🏆<br>⭐⭐⭐</div>
    <span class="tooltiptext">Skriv det<br>manglende tal</span>
  </label> 
  
  <div id="letterNbox" class="show1">
    <div class="item-1">
      <!-- onclick="closeN()" hører til dette label hvis functionen skal bruges -->
      <label id="closeN" class="close-btn1" type="checkbox" for="letterN">&times;</label>
      
      <div id="bogstaver14" class="bogstaver1" for="closeN">
        
        <div class="tegn1">5 + 5 =</div>
        <input id="numberN1" type="text" class="checkbox14" for="closeN"/>
        <button class="decode1" onclick="calculateN1()">✔</button>
        <input class="svar1" type="text" name="feedbackN1" id="feedbackN1" readonly>
        
        <div class="tegn1">4 + 6 =</div>
        <input id="numberN2" type="text" class="checkbox14" for="closeN"/>
        <button class="decode1" onclick="calculateN2()">✔</button>
        <input class="svar1" type="text" name="feedbackN2" id="feedbackN2" readonly>
        
        <div class="tegn1">3 + 7 =</div>
        <input id="numberN3" type="text" class="checkbox14" for="closeN"/>
        <button class="decode1" onclick="calculateN3()">✔</button>
        <input class="svar1" type="text" name="feedbackN3" id="feedbackN3" readonly>
        
        <div class="tegn1">1 + 9 =</div>
        <input id="numberN4" type="text" class="checkbox14" for="closeN"/>
        <button class="decode1" onclick="calculateN4()">✔</button>
        <input class="svar1" type="text" name="feedbackN4" id="feedbackN4" readonly>
        
      </div>
      
    </div>
    <button class="decode0" onclick="resultat14()" for="closeN">I ALT</button>
    <input class="resultat14" type="text" name="visresultat14" id="visresultat14" for="letterNbox" readonly>
    
  </div>
  <div id="overlayN" class="popup1" for="letterN"></div>
  
<!-- O  -->
  <input id="letterO" type="checkbox"/>
  <label id="letterObutton" for="letterO" class="tooltip grid-item button3">
    <div class="buttonTxt">15🏆<br>⭐⭐⭐</div>
    <span class="tooltiptext">Skriv det<br>manglende tal</span> 
  </label> 
  
  <div id="letterObox" class="show1">
    <div class="item-1">
      <!-- onclick="closeO()" hører til dette label hvis functionen skal bruges -->
      <label id="closeO" class="close-btn1" type="checkbox" for="letterO">&times;</label>
      
      <div id="bogstaver15" class="bogstaver1" for="closeO">
        
        <div class="tegn1">5 + 5 =</div>
        <input id="numberO1" type="text" class="checkbox15" for="closeO"/>
        <button class="decode1" onclick="calculateO1()">✔</button>
        <input class="svar1" type="text" name="feedbackO1" id="feedbackO1" readonly>
        
        <div class="tegn1">4 + 4 =</div>
        <input id="numberO2" type="text" class="checkbox15" for="closeO"/>
        <button class="decode1" onclick="calculateO2()">✔</button>
        <input class="svar1" type="text" name="feedbackO2" id="feedbackO2" readonly>
        
        <div class="tegn1">3 + 3 =</div>
        <input id="numberO3" type="text" class="checkbox15" for="closeO"/>
        <button class="decode1" onclick="calculateO3()">✔</button>
        <input class="svar1" type="text" name="feedbackO3" id="feedbackO3" readonly>
        
        <div class="tegn1">2 + 2 =</div>
        <input id="numberO4" type="text" class="checkbox15" for="closeO"/>
        <button class="decode1" onclick="calculateO4()">✔</button>
        <input class="svar1" type="text" name="feedbackO4" id="feedbackO4" readonly>
        
      </div>
      
    </div>
    <button class="decode0" onclick="resultat15()" for="closeO">I ALT</button>
    <input class="resultat15" type="text" name="visresultat15" id="visresultat15" for="letterObox" readonly>
    
  </div>
  <div id="overlayO" class="popup1" for="letterO"></div>
   
<!-- P  
  <input id="letterP" type="checkbox" onclick="closeAllP()"/>
  <label id="letterPbutton" for="letterP" class="tooltip grid-item button3">
    <div class="buttonTxt">P</div>
    <span class="tooltiptext">Learn about<br>the letter P</span> 
  </label> 
  
  <div id="letterPbox" class="show1">
    <div class="item-1">
      <label id="closeP" class="close-btn1" type="checkbox" for="letterP">&times;</label>
      
      <div id="bogstaver16" class="bogstaver16" for="closeP">
        
        <input id="pil1" type="checkbox" class="checkbox16" for="closeP"/>
        <div class="ord1">PIL</div>
        <label id="pil0" class="dyr16" for="pil1">
          <img src="https://cdn.pixabay.com/photo/2012/04/02/15/57/right-24825_960_720.png" style="width: 50%;">
        </label>
        
        <input id="paere1" type="checkbox" class="checkbox16" for="closeP"/>
        <div class="ord1">PÆRE</div>
        <label id="paere0" class="dyr16" for="paere1">
          <img src="https://cdn.pixabay.com/photo/2013/07/12/16/56/pear-151526_960_720.png" style="width: 40%;">
        </label>
        
        <input id="plante1" type="checkbox" class="checkbox16" for="closeP"/>
        <div class="ord1">PLANTE</div>
        <label id="plante0" class="dyr16" for="plante1">
          <img src="https://cdn.pixabay.com/photo/2013/07/12/19/24/seedling-154735_960_720.png" style="width: 50%;">
        </label>
        
        <input id="pizza1" type="checkbox" class="checkbox16" for="closeP"/>
        <div class="ord1">PIZZA</div>
        <label id="pizza0" class="dyr16" for="pizza1">
          <img src="https://cdn.pixabay.com/photo/2013/07/13/09/36/pizza-155771_960_720.png" style="width: 80%;">
        </label>
        
      </div>
      
    </div>
  </div>
  <div id="overlayP" class="popup1" for="letterP"></div>
-->  
<!-- Q  
  <input id="letterQ" type="checkbox" onclick="closeAllQ()"/>
  <label id="letterQbutton" for="letterQ" class="tooltip grid-item button3">
    <div class="buttonTxt">Q</div>
    <span class="tooltiptext">Learn about<br>the letter Q</span> 
  </label> 
  
  <div id="letterQbox" class="show1">
    <div class="item-1">
      <label id="closeQ" class="close-btn1" type="checkbox" for="letterQ">&times;</label>
      
      <div id="bogstaver17" class="bogstaver17" for="closeQ">
        
        <input id="quiz1" type="checkbox" class="checkbox17" for="closeQ"/>
        <div class="ord1">QUIZ</div>
        <label id="quiz0" class="dyr17" for="quiz1">
          <img src="https://cdn.pixabay.com/photo/2021/03/03/14/25/icon-6065420_960_720.png" style="width: 50%;">
        </label>
        
        <input id="quiche1" type="checkbox" class="checkbox17" for="closeQ"/>
        <div class="ord1">QUICHE</div>
        <label id="quiche0" class="dyr17" for="quiche1">
          <img src="https://cdn.pixabay.com/photo/2014/12/22/00/02/pumpkin-576629_960_720.png" style="width: 40%;">
        </label>
        
        <input id="qrkode1" type="checkbox" class="checkbox17" for="closeQ"/>
        <div class="ord1">QR KODE</div>
        <label id="qrkode0" class="dyr17" for="qrkode1">
          <img src="https://cdn.pixabay.com/photo/2013/07/13/10/11/qr-code-156717_960_720.png" style="width: 50%;">
        </label>
        
        <input id="quilt1" type="checkbox" class="checkbox17" for="closeQ"/>
        <div class="ord1">QUILT TÆPPE</div>
        <label id="quilt0" class="dyr17" for="quilt1">
          <img src="https://cdn.pixabay.com/photo/2012/04/26/10/29/quilt-41942_960_720.png" style="width: 80%;">
        </label>
        
      </div>
      
    </div>
  </div>
  <div id="overlayQ" class="popup1" for="letterQ"></div>
-->  
<!-- R  
  <input id="letterR" type="checkbox" onclick="closeAllR()"/>
  <label id="letterRbutton" for="letterR" class="tooltip grid-item button3">
    <div class="buttonTxt">R</div>
    <span class="tooltiptext">Learn about<br>the letter R</span> 
  </label> 
  
  <div id="letterRbox" class="show1">
    <div class="item-1">
      <label id="closeR" class="close-btn1" type="checkbox" for="letterR">&times;</label>
      
      <div id="bogstaver18" class="bogstaver18" for="closeR">
        
        <input id="regn1" type="checkbox" class="checkbox18" for="closeR"/>
        <div class="ord1">REGN</div>
        <label id="regn0" class="dyr18" for="regn1">
          <img src="https://cdn.pixabay.com/photo/2012/04/18/13/22/cloud-37011_960_720.png" style="width: 50%;">
        </label>
        
        <input id="rive1" type="checkbox" class="checkbox18" for="closeR"/>
        <div class="ord1">RIVE</div>
        <label id="rive0" class="dyr18" for="rive1">
          <img src="https://cdn.pixabay.com/photo/2016/04/01/11/28/garden-1300347_960_720.png" style="width: 40%;">
        </label>
        
        <input id="raev1" type="checkbox" class="checkbox18" for="closeR"/>
        <div class="ord1">RÆV</div>
        <label id="raev0" class="dyr18" for="raev1">
          <img src="https://cdn.pixabay.com/photo/2016/03/31/19/55/alphabet-word-images-1295383_960_720.png" style="width: 50%;">
        </label>
        
        <input id="regnbue1" type="checkbox" class="checkbox18" for="closeR"/>
        <div class="ord1">REGNBUE</div>
        <label id="regnbue0" class="dyr18" for="regnbue1">
          <img src="https://cdn.pixabay.com/photo/2017/05/02/17/16/rainbow-2278774_960_720.png" style="width: 50%;">
        </label>
        
      </div>
      
    </div>
  </div>
  <div id="overlayR" class="popup1" for="letterR"></div>
-->  
<!-- S  
  <input id="letterS" type="checkbox" onclick="closeAllS()"/>
  <label id="letterSbutton" for="letterS" class="tooltip grid-item button3">
    <div class="buttonTxt">S</div>
    <span class="tooltiptext">Learn about<br>the letter S</span> 
  </label> 
  
  <div id="letterSbox" class="show1">
    <div class="item-1">
      <label id="closeS" class="close-btn1" type="checkbox" for="letterS">&times;</label>
      
      <div id="bogstaver19" class="bogstaver19" for="closeS">
        
        <input id="svamp1" type="checkbox" class="checkbox19" for="closeS"/>
        <div class="ord1">SVAMP</div>
        <label id="svamp0" class="dyr19" for="svamp1">
          <img src="https://cdn.pixabay.com/photo/2016/08/17/23/34/mushroom-1601826_960_720.png" style="width: 50%;">
        </label>
        
        <input id="snegl1" type="checkbox" class="checkbox19" for="closeS"/>
        <div class="ord1">SNEGL</div>
        <label id="snegl0" class="dyr19" for="snegl1">
          <img src="https://cdn.pixabay.com/photo/2022/07/28/01/25/snail-7348970_960_720.png" style="width: 50%;">
        </label>
        
        <input id="sol1" type="checkbox" class="checkbox19" for="closeS"/>
        <div class="ord1">SOL</div>
        <label id="sol0" class="dyr19" for="sol1">
          <img src="https://cdn.pixabay.com/photo/2017/01/31/13/57/blazing-2024294_960_720.png" style="width: 50%;">
        </label>
        
        <input id="slange1" type="checkbox" class="checkbox19" for="closeS"/>
        <div class="ord1">SLANGE</div>
        <label id="slange0" class="dyr19" for="slange1">
          <img src="https://cdn.pixabay.com/photo/2016/03/31/19/29/animals-1295060_960_720.png" style="width: 50%;">
        </label>
        
      </div>
      
    </div>
  </div>
  <div id="overlayS" class="popup1" for="letterS"></div>
-->  
<!-- T  
  <input id="letterT" type="checkbox" onclick="closeAllT()"/>
  <label id="letterTbutton" for="letterT" class="tooltip grid-item button3">
    <div class="buttonTxt">T</div>
    <span class="tooltiptext">Learn about<br>the letter T</span> 
  </label> 
  
  <div id="letterTbox" class="show1">
    <div class="item-1">
      <label id="closeT" class="close-btn1" type="checkbox" for="letterT">&times;</label>
      
      <div id="bogstaver20" class="bogstaver20" for="closeT">
        
        <input id="trekant1" type="checkbox" class="checkbox20" for="closeT"/>
        <div class="ord1">TREKANT</div>
        <label id="trekant0" class="dyr20" for="trekant1">
          <div class="trekant1"></div>
        </label>
        
        <input id="taske1" type="checkbox" class="checkbox20" for="closeT"/>
        <div class="ord1">TASKE</div>
        <label id="taske0" class="dyr20" for="taske1">
          <img src="https://cdn.pixabay.com/photo/2013/07/12/17/58/backpack-152705_960_720.png" style="width: 50%;">
        </label>
        
        <input id="traktor1" type="checkbox" class="checkbox20" for="closeT"/>
        <div class="ord1">TRAKTOR</div>
        <label id="traktor0" class="dyr20" for="traktor1">
          <img src="https://cdn.pixabay.com/photo/2014/04/03/00/30/tractor-308512_960_720.png" style="width: 50%;">
        </label>
        
        <input id="telefon1" type="checkbox" class="checkbox20" for="closeT"/>
        <div class="ord1">TELEFON</div>
        <label id="telefon0" class="dyr20" for="telefon1">
          <img src="https://cdn.pixabay.com/photo/2014/07/10/06/51/phone-388838_960_720.png" style="width: 50%;">
        </label>
        
      </div>
      
    </div>
  </div>
  <div id="overlayT" class="popup1" for="letterT"></div>
-->  
<!-- U  
  <input id="letterU" type="checkbox" onclick="closeAllU()"/>
  <label id="letterUbutton" for="letterU" class="tooltip grid-item button4">
    <div class="buttonTxt">U</div>
    <span class="tooltiptext">Learn about<br>the letter U</span> 
  </label> 
  
  <div id="letterUbox" class="show1">
    <div class="item-1">
      <label id="closeU" class="close-btn1" type="checkbox" for="letterU">&times;</label>
      
      <div id="bogstaver21" class="bogstaver21" for="closeU">
        
        <input id="ur1" type="checkbox" class="checkbox21" for="closeU"/>
        <div class="ord1">UR</div>
        <label id="ur0" class="dyr21" for="ur1">
          <img src="https://cdn.pixabay.com/photo/2016/04/01/12/18/clock-1300646_960_720.png" style="width: 50%;">
        </label>
        
        <input id="ugle1" type="checkbox" class="checkbox21" for="closeU"/>
        <div class="ord1">UGLE</div>
        <label id="ugle0" class="dyr21" for="ugle1">
          <img src="https://cdn.pixabay.com/photo/2016/03/19/04/40/owl-1266206_960_720.png" style="width: 50%;">
        </label>
        
        <input id="underbukser1" type="checkbox" class="checkbox21" for="closeU"/>
        <div class="ord1">UNDERBUKSER</div>
        <label id="underbukser0" class="dyr21" for="underbukser1">
          <img src="https://cdn.pixabay.com/photo/2014/04/03/10/34/underwear-310929_960_720.png" style="width: 50%;">
        </label>
        
        <input id="ukrudt1" type="checkbox" class="checkbox21" for="closeU"/>
        <div class="ord1">UKRUDT</div>
        <label id="ukrudt0" class="dyr21" for="ukrudt1">
          <img src="https://cdn.pixabay.com/photo/2012/04/13/00/51/plant-31446_960_720.png" style="width: 50%;">
        </label>
        
      </div>
      
    </div>
  </div>
  <div id="overlayU" class="popup1" for="letterU"></div>
-->  
<!-- V  
  <input id="letterV" type="checkbox" onclick="closeAllV()"/>
  <label id="letterVbutton" for="letterV" class="tooltip grid-item button3">
    <div class="buttonTxt">V</div>
    <span class="tooltiptext">Learn about<br>the letter V</span> 
  </label> 
  
  <div id="letterVbox" class="show1">
    <div class="item-1">
      <label id="closeV" class="close-btn1" type="checkbox" for="letterV">&times;</label>
      
      <div id="bogstaver22" class="bogstaver22" for="closeV">
        
        <input id="vase1" type="checkbox" class="checkbox22" for="closeV"/>
        <div class="ord1">VASE</div>
        <label id="vase0" class="dyr22" for="vase1">
          <img src="https://cdn.pixabay.com/photo/2022/04/20/07/24/daisies-7144564_960_720.png" style="width: 50%;">
        </label>
        
        <input id="vindue1" type="checkbox" class="checkbox22" for="closeV"/>
        <div class="ord1">VINDUE</div>
        <label id="vindue0" class="dyr22" for="vindue1">
          <img src="https://cdn.pixabay.com/photo/2017/01/24/12/31/window-2005298_960_720.png" style="width: 50%;">
        </label>
        
        <input id="vindrue1" type="checkbox" class="checkbox22" for="closeV"/>
        <div class="ord1">VINDRUE</div>
        <label id="vindrue0" class="dyr22" for="vindrue1">
          <img src="https://cdn.pixabay.com/photo/2013/07/13/13/54/bunch-of-grapes-161763_960_720.png" style="width: 50%;">
        </label>
        
        <input id="violin1" type="checkbox" class="checkbox22" for="closeV"/>
        <div class="ord1">VIOLIN</div>
        <label id="violin0" class="dyr22" for="violin1">
          <img src="https://cdn.pixabay.com/photo/2012/04/13/20/54/violin-33610_960_720.png" style="width: 50%;">
        </label>
        
      </div>
      
    </div>
  </div>
  <div id="overlayV" class="popup1" for="letterV"></div>
-->  
<!-- X  
  <input id="letterX" type="checkbox" onclick="closeAllX()"/>
  <label id="letterXbutton" for="letterX" class="tooltip grid-item button3">
    <div class="buttonTxt">X</div>
    <span class="tooltiptext">Learn about<br>the letter X</span> 
  </label> 
  
  <div id="letterXbox" class="show1">
    <div class="item-1">
      <label id="closeX" class="close-btn1" type="checkbox" for="letterX">&times;</label>
      
      <div id="bogstaver23" class="bogstaver23" for="closeX">
        
        <input id="xylofon1" type="checkbox" class="checkbox23" for="closeX"/>
        <div class="ord1">XYLOFON</div>
        <label id="xylofon0" class="dyr23" for="xylofon1">
          <img src="https://cdn.pixabay.com/photo/2019/01/12/16/34/graphic-3928826_960_720.png" style="width: 50%;">
        </label>
        
      </div>
      
    </div>
  </div>
  <div id="overlayX" class="popup1" for="letterX"></div>
-->  
<!-- Y  
  <input id="letterY" type="checkbox"onclick="closeAllY()"/>
  <label id="letterYbutton" for="letterY" class="tooltip grid-item button4">
    <div class="buttonTxt">Y</div>
    <span class="tooltiptext">Learn about<br>the letter Y</span> 
  </label> 
  
  <div id="letterYbox" class="show1">
    <div class="item-1">
      <label id="closeY" class="close-btn1" type="checkbox" for="letterY">&times;</label>
      <div id="bogstaver24" class="bogstaver24" for="closeY">
        
        <input id="yoyo1" type="checkbox" class="checkbox24" for="closeY"/>
        <div class="ord1">YO YO</div>
        <label id="yoyo0" class="dyr24" for="yoyo1">
          <img src="https://cdn.pixabay.com/photo/2012/04/11/17/09/yo-yo-28978_960_720.png" style="width: 50%;">
        </label>
        
        <input id="yoghurt1" type="checkbox" class="checkbox24" for="closeY"/>
        <div class="ord1">YOGHURT</div>
        <label id="yoghurt0" class="dyr24" for="yoghurt1">
          <img src="https://cdn.pixabay.com/photo/2013/07/13/10/21/yogurt-157051_960_720.png" style="width: 50%;">
        </label>
        
      </div>
      
    </div>
  </div>
  <div id="overlayY" class="popup1" for="letterY"></div>
-->  
<!-- Z  
  <input id="letterZ" type="checkbox"onclick="closeAllZ()"/>
  <label id="letterZbutton" for="letterZ" class="tooltip grid-item button3">
    <div class="buttonTxt">Z</div>
    <span class="tooltiptext">Learn about<br>the letter Z</span> 
  </label> 
  
  <div id="letterZbox" class="show1">
    <div class="item-1">
      <label id="closeZ" class="close-btn1" type="checkbox" for="letterZ">&times;</label>
      
      <div id="bogstaver25" class="bogstaver25" for="closeZ">
        
        <input id="zebra1" type="checkbox" class="checkbox25" for="closeZ"/>
        <div class="ord1">ZEBRA</div>
        <label id="zebra0" class="dyr25" for="zebra1">
          <img src="https://cdn.pixabay.com/photo/2019/05/17/19/01/zebra-4210396_960_720.png" style="width: 40%;">
        </label>
        
        <input id="zoo1" type="checkbox" class="checkbox25" for="closeZ"/>
        <div class="ord1">ZOO</div>
        <label id="zoo0" class="dyr25" for="zoo1">
          <img src="https://cdn.pixabay.com/photo/2021/04/27/22/08/zoo-6212604_960_720.png" style="width: 70%;">
        </label>
        
        <input id="zigzag1" type="checkbox" class="checkbox25" for="closeZ"/>
        <div class="ord1">ZIG ZAG</div>
        <label id="zigzag0" class="dyr25" for="zigzag1">
          <div class="zig1"></div>
          <div class="zig2"></div>
          <div class="zig3"></div>
          <div class="zig4"></div>
        </label>
        
      </div>
      
    </div>
  </div>
  <div id="overlayZ" class="popup1" for="letterZ"></div>
-->  
<!-- Æ  
  <input id="letterAE" type="checkbox"onclick="closeAllAE()"/>
  <label id="letterAEbutton" for="letterAE" class="tooltip grid-item button4">
    <div class="buttonTxt">Æ</div>
    <span class="tooltiptext">Learn about<br>the letter Æ</span> 
  </label> 
  
  <div id="letterAEbox" class="show1">
    <div class="item-1">
      <label id="closeAE" class="close-btn1" type="checkbox" for="letterAE">&times;</label>
      
      <div id="bogstaver26" class="bogstaver26" for="closeAE">
        
        <input id="aesel1" type="checkbox" class="checkbox26" for="closeAE"/>
        <div class="ord1">ÆSEL</div>
        <label id="aesel0" class="dyr26" for="aesel1">
          <img src="https://cdn.pixabay.com/photo/2012/05/07/13/08/donkey-48412_960_720.png" style="width: 50%;">
        </label>
        
        <input id="aeble1" type="checkbox" class="checkbox26" for="closeAE"/>
        <div class="ord1">ÆBLE</div>
        <label id="aeble0" class="dyr26" for="aeble1">
          <img src="https://cdn.pixabay.com/photo/2018/09/05/19/56/mace-3656942_960_720.png" style="width: 50%;">
        </label>
        
        <input id="aeg1" type="checkbox" class="checkbox26" for="closeAE"/>
        <div class="ord1">ÆG</div>
        <label id="aeg0" class="dyr26" for="aeg1">
          <img src="https://cdn.pixabay.com/photo/2013/07/13/13/49/easter-161613_960_720.png" style="width: 50%;">
        </label>
        
        <input id="aerte1" type="checkbox" class="checkbox26" for="closeAE"/>
        <div class="ord1">ÆRTE</div>
        <label id="aerte0" class="dyr26" for="aerte1">
          <img src="https://cdn.pixabay.com/photo/2014/12/21/23/40/peas-575815_960_720.png" style="width: 60%;">
        </label>
        
      </div>
      
    </div>
  </div>
  <div id="overlayAE" class="popup1" for="letterAE"></div>
-->  
<!-- Ø  
  <input id="letterOE" type="checkbox"onclick="closeAllOE()"/>
  <label id="letterOEbutton" for="letterOE" class="tooltip grid-item button4">
    <div class="buttonTxt">Ø</div>
    <span class="tooltiptext">Learn about<br>the letter Ø</span> 
  </label> 
  
  <div id="letterOEbox" class="show1">
    <div class="item-1">
      <label id="closeOE" class="close-btn1" type="checkbox" for="letterOE">&times;</label>
      
      <div id="bogstaver27" class="bogstaver27" for="closeOE">
        
        <input id="oekse1" type="checkbox" class="checkbox27" for="closeOE"/>
        <div class="ord1">ØKSE</div>
        <label id="oekse0" class="dyr27" for="oekse1">
          <img src="https://cdn.pixabay.com/photo/2014/03/25/16/27/ax-297185_960_720.png" style="width: 60%;">
        </label>
        
        <input id="oe1" type="checkbox" class="checkbox27" for="closeOE"/>
        <div class="ord1">Ø</div>
        <label id="oe0" class="dyr27" for="oe1">
          <img src="https://cdn.pixabay.com/photo/2021/02/19/13/13/island-6030187_960_720.png" style="width: 50%;">
        </label>
        
        <input id="oesters1" type="checkbox" class="checkbox27" for="closeOE"/>
        <div class="ord1">ØSTERS</div>
        <label id="oesters0" class="dyr27" for="oesters1">
          <img src="https://cdn.pixabay.com/photo/2019/02/08/03/36/graphic-3982644_960_720.png" style="width: 50%;">
        </label>
        
        <input id="oeje1" type="checkbox" class="checkbox27" for="closeOE"/>
        <div class="ord1">ØJE</div>
        <label id="oeje0" class="dyr27" for="oeje1">
          <img src="https://cdn.pixabay.com/photo/2014/04/03/10/05/eye-309755_960_720.png" style="width: 50%;">
        </label>
        
      </div>
      
    </div>
  </div>
  <div id="overlayOE" class="popup1" for="letterOE"></div>
-->  
<!-- Å 
  <input id="letterAA" type="checkbox" onclick="closeAllAA()"/>
  <label id="letterAAbutton" for="letterAA" class="tooltip grid-item button4">
    <div class="buttonTxt">Å</div>
    <span class="tooltiptext">Learn about<br>the letter Å</span> 
  </label> 
  
  <div id="letterAAbox" class="show1">
    <div class="item-1">
      <label id="closeAA" class="close-btn1" type="checkbox" for="letterAA">&times;</label>
      
      <div id="bogstaver28" class="bogstaver28" for="closeAA">
        
        <input id="aa1" type="checkbox" class="checkbox28" for="closeAA"/>
        <div class="ord1">Å</div>
        <label id="aa0" class="dyr28" for="aa1">
          <img src="https://cdn.pixabay.com/photo/2021/04/26/13/51/river-6208962_960_720.png" style="width: 50%;">
        </label>
        
        <input id="aal1" type="checkbox" class="checkbox28" for="closeAA"/>
        <div class="ord1">ÅL</div>
        <label id="aal0" class="dyr28" for="aal1">
          <img src="https://cdn.pixabay.com/photo/2012/05/07/12/28/eel-48311_960_720.png" style="width: 50%;">
        </label>
        
        <input id="aakande1" type="checkbox" class="checkbox28" for="closeAA"/>
        <div class="ord1">ÅKANDE</div>
        <label id="aakande0" class="dyr28" for="aakande1">
          <img src="https://cdn.pixabay.com/photo/2019/05/04/09/45/water-lily-4177686_960_720.png" style="width: 50%;">
        </label>
        
      </div>
      
    </div>
  </div>
  <div id="overlayAA" class="popup1" for="letterAA"></div>
-->
</div>

<input id="closeNO" type="checkbox"/>
<div id="overlayNO" class="popup2">
  <div class="notyet">Du har ikke nok point endnu 🙂</div>
  <button id="goBack1" class="goBack1" for="closeNO" onclick="NotYet()">TILBAGE</button>
</div>

<div id="overlayWIN" class="popup2">
  <div class="winner">TILLYKKE!!!
    <div class="div1" id="div1">
      <div class="ball1" id="ball1">
        <img src="https://cdn.pixabay.com/photo/2016/04/02/04/57/comic-1302164_960_720.png" style="margin-top: -20px; width: 100%;transform: scale(50%,50%);">
      </div>
      <div class="shadow1" id="shadow1"></div>
    </div>
    <div class="trophy" id="trophy">
      <img src="https://cdn.pixabay.com/photo/2013/07/12/14/35/award-148546_960_720.png" style="width: 200px;">
    </div>
  </div>
</div>

<input id="tjek1" type="checkbox"/>
<button id="tjek1box" class="tjek1" for="tjek1" onclick="Price1()">FÆRDIG!</button>
<input class="resultatALL" type="text" name="resultatALL" id="resultatALL" readonly/></input>
<!--
https://cdn.pixabay.com/photo/2012/04/12/20/12/moon-30466_960_720.png
https://cdn.pixabay.com/photo/2012/04/25/00/47/christmas-tree-41448_960_720.png
https://cdn.pixabay.com/photo/2013/07/13/13/22/santa-160903_960_720.png
https://cdn.pixabay.com/photo/2013/07/13/13/20/christmas-160840_960_720.png
https://cdn.pixabay.com/photo/2014/12/21/23/34/iceberg-575533_960_720.png
https://cdn.pixabay.com/photo/2012/05/07/15/44/bison-48640_960_720.png
https://cdn.pixabay.com/photo/2021/12/06/07/26/reptile-6849431_960_720.png
https://cdn.pixabay.com/photo/2012/04/26/12/52/orange-42395_960_720.png
https://cdn.pixabay.com/photo/2012/04/26/12/52/orange-42395_960_720.png
https://cdn.pixabay.com/photo/2020/01/22/18/11/guitar-4785927_960_720.png
https://cdn.pixabay.com/photo/2021/04/03/07/03/delfin-6146683_960_720.png
https://cdn.pixabay.com/photo/2021/09/16/04/31/animal-6628303_960_720.png
https://cdn.pixabay.com/photo/2022/04/08/06/36/animal-7118844_960_720.png
<div class="firkant" style="float:right"></div>
https://cdn.pixabay.com/photo/2023/04/17/05/49/elephant-7931673_960_720.png
https://cdn.pixabay.com/photo/2021/12/12/10/57/angel-6864746_960_720.png
https://cdn.pixabay.com/photo/2020/11/22/04/58/child-5765632_960_720.png
<div class="cirkel1" style="float:right;"></div>
https://cdn.pixabay.com/photo/2021/10/15/23/02/circus-tent-6713616_960_720.png
https://cdn.pixabay.com/photo/2016/03/31/17/50/brass-1293947_960_720.png
https://cdn.pixabay.com/photo/2021/12/13/17/50/fruit-6868798_960_720.png
https://cdn.pixabay.com/photo/2021/09/03/06/25/insect-6595117_960_720.png
https://cdn.pixabay.com/photo/2019/09/26/07/57/banana-4505334_960_720.png
https://cdn.pixabay.com/photo/2022/01/16/17/45/lemon-6942777_960_720.png
https://cdn.pixabay.com/photo/2022/02/02/12/35/bicycle-6988350_960_720.png
https://cdn.pixabay.com/photo/2012/04/05/01/45/hat-25758_960_720.png
https://cdn.pixabay.com/photo/2021/02/09/13/33/flashlight-5998564_960_720.png
https://cdn.pixabay.com/photo/2019/02/21/07/42/graphic-4010808_960_720.png
https://cdn.pixabay.com/photo/2013/07/12/12/51/acorn-146412_960_720.png
https://cdn.pixabay.com/photo/2016/04/01/12/08/table-1300555_960_720.png
-->
              
            
!

CSS

              
                .detHele1 {
  position: absolute;
  display: grid;
  width: 98%;
  height: 550px;
  grid-template-columns: auto auto auto auto auto;
  padding: 0px;
}
.grid-item {
  position: absolute;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 20px;
  padding: 0px;
  font-size: 20px;
  text-align: center;
  display: grid;
}
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip .tooltiptext {
  font-family: verdana;
  font-size: 11px;
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
.close-btn1 {
	position: absolute;
	border: .6px solid black;
  background: white;
	padding: 10px;
	top: 1rem;
	right: 1rem;
	font-size: 2rem;
	cursor: pointer;
  /*visibility: hidden; skal sætte på hvis closeA mm skal aktiveres*/
}
.close-btn1:hover {
	border: .6px solid white;
	background: magenta;1
}
.close-btn1:checked + .show1{
  visibility: hidden;
}
.show1 {
  position: absolute;
  height: 450px;
  width: 75%;
  background-color: aqua;
  z-index: 9;
  transform: translateX(20%);
  margin-top: 5%;
  display: grid;
  visibility: hidden;
  border-radius: 20px;
}
.popup1 {
	background-color: rgba(0, 0, 0, 0.575);
	height: 590px;
	width: 100%;
	position: absolute;
  z-index: 3;
  visibility: hidden;
}
.total {
  height: 50px;
  text-align:center;
  font-size:20px;
}
.item-1 {
  margin-left: 30px;
  margin-top: 20px;
  /*align-self: center;*/
  font-family: verdana;
}
.tegn1 {
  font-size: 30px;
  float: right;
  margin-left: 80px;
}
.checkbox1, .checkbox2, .checkbox3, .checkbox4, .checkbox5 {
  position: auto;
  height: 30px;
  width: 30px;
  font-size: 20px;
  text-transform: uppercase;
}
.checkbox6, .checkbox7, .checkbox8, .checkbox9, .checkbox10, .checkbox11, .checkbox12, .checkbox13, .checkbox14, .checkbox15, .checkbox16, .checkbox17, .checkbox18, .checkbox19, .checkbox20, .checkbox21, .checkbox22, .checkbox23, .checkbox24, .checkbox25, .checkbox26, .checkbox27, .checkbox28 {
  position: auto;
  height: 30px;
  width: 30px;
  font-size: 20px;
  margin-left: 10px;
  text-transform: uppercase;
}
.decode1 {
  background-color: purple;
  border-radius: 10px;
  border: 0;
  color: white;
  padding: 5px;
  height: 30px;
  width: 40px;
  cursor: pointer;
  box-shadow: 0 5px #999;
  margin-left: 10px;
}
.decode1:hover {
  background-color: black;
}
.decode1:active {
  background-color: black;
  box-shadow: 0 3px #666;
  transform: translateY(2px);
}
.decode0 {
  background-color: purple;
  border-radius: 10px;
  border: 0;
  color: white;
  padding: 5px;
  cursor: pointer;
  box-shadow: 0 5px #999;
}
.decode0:hover {
  background-color: black;
  padding: 5px;
}
.decode0:active {
  background-color: black;
  box-shadow: 0 3px #666;
  transform: translateY(2px);
}
.svar1 {
  text-align:center;
  height: 30px;
  width: 30px;
  font-size: 20px;
  border-radius: 50%;
  margin-left: 10px;
}
.resultat1, .resultat2, .resultat3, .resultat4, .resultat5, .resultat6, .resultat7, .resultat8, .resultat9, .resultat10, .resultat11, .resultat12, .resultat13, .resultat14, .resultat15 {
  text-align: center;
  font-size: 20px;
}
.ord1 {
  margin-top: 10px;
  margin-right: 20px;
}
.bogstaver1, .bogstaver2, .bogstaver3, .bogstaver4, .bogstaver5, .bogstaver6, .bogstaver7, .bogstaver8, .bogstaver9, .bogstaver10, .bogstaver11, .bogstaver12, .bogstaver13, .bogstaver14, .bogstaver15, .bogstaver16, .bogstaver17, .bogstaver18, .bogstaver19, .bogstaver20, .bogstaver21, .bogstaver22, .bogstaver23, .bogstaver24, .bogstaver25, .bogstaver26, .bogstaver27, .bogstaver28{
  width: 90%;
  grid-template-columns: auto auto auto auto auto auto auto auto;
  row-gap: 100px;
  display: grid;
}
.dyr1, .dyr2, .dyr3, .dyr4, .dyr5, .dyr6, .dyr7, .dyr8, .dyr9, .dyr10, .dyr11, .dyr12, .dyr13, .dyr14, .dyr15, .dyr16, .dyr17, .dyr18, .dyr19, .dyr20, .dyr21, .dyr22, .dyr23, .dyr24, .dyr25, .dyr26, .dyr27, .dyr28{
  visibility: ;
}

/*knap*/
.button3 {
  position: auto;
  width: 100%;
  /*height: ;*/
  background-color: #57F090;
	/*text-transform: uppercase;*/
	/*padding: 1rem 2.5rem;*/
	cursor: pointer;
  display: grid;
}
.button3:hover {
  cursor: pointer;
  background-color: #1AA35A;
}
.buttonTxt {
  font-family: verdana;
  justify-self: center;
  align-self: center;
	font-size: 20px;
	/*letter-spacing: 2px;*/
  font-weight: 900;
}
#letterA {
  display: none;
}
#letterA:checked ~ #overlayA {
  visibility: visible;
}
#letterA:checked ~ #letterAbutton {
  background-color: #1AA35A;
  color: white;
}
#letterA:checked ~ #letterAbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterB {
  display: none;
}
#letterB:checked ~ #overlayB {
  visibility: visible;
}
#letterB:checked ~ #letterBbutton {
  background-color: #1AA35A;
}
#letterB:checked ~ #letterBbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterC {
  display: none;
}
#letterC:checked ~ #overlayC {
  visibility: visible;
}
#letterC:checked ~ #letterCbutton {
  background-color: #1AA35A;
}
#letterC:checked ~ #letterCbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterD {
  display: none;
}
#letterD:checked ~ #overlayD {
  visibility: visible;
}
#letterD:checked ~ #letterDbutton {
  background-color: #1AA35A;
}
#letterD:checked ~ #letterDbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterE {
  display: none;
}
#letterE:checked ~ #overlayE {
  visibility: visible;
}
#letterE:checked ~ #letterEbutton {
  background-color: #1AA35A;
  color: white;
}
#letterE:checked ~ #letterEbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterF {
  display: none;
}
#letterF:checked ~ #overlayF {
  visibility: visible;
}
#letterF:checked ~ #letterFbutton {
  background-color: #1AA35A;
}
#letterF:checked ~ #letterFbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterG {
  display: none;
}
#letterG:checked ~ #overlayG {
  visibility: visible;
}
#letterG:checked ~ #letterGbutton {
  background-color: #1AA35A;
}
#letterG:checked ~ #letterGbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterH {
  display: none;
}
#letterH:checked ~ #overlayH {
  visibility: visible;
}
#letterH:checked ~ #letterHbutton {
  background-color: #1AA35A;
}
#letterH:checked ~ #letterHbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterI {
  display: none;
}
#letterI:checked ~ #overlayI {
  visibility: visible;
}
#letterI:checked ~ #letterIbutton {
  background-color: #1AA35A;
  color: white;
}
#letterI:checked ~ #letterIbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterJ {
  display: none;
}
#letterJ:checked ~ #overlayJ {
  visibility: visible;
}
#letterJ:checked ~ #letterJbutton {
  background-color: #1AA35A;
}
#letterJ:checked ~ #letterJbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterK {
  display: none;
}
#letterK:checked ~ #overlayK {
  visibility: visible;
}
#letterK:checked ~ #letterKbutton {
  background-color: #1AA35A;
}
#letterK:checked ~ #letterKbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterL {
  display: none;
}
#letterL:checked ~ #overlayL {
  visibility: visible;
}
#letterL:checked ~ #letterLbutton {
  background-color: #1AA35A;
}
#letterL:checked ~ #letterLbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterM {
  display: none;
}
#letterM:checked ~ #overlayM {
  visibility: visible;
}
#letterM:checked ~ #letterMbutton {
  background-color: #1AA35A;
}
#letterM:checked ~ #letterMbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterN {
  display: none;
}
#letterN:checked ~ #overlayN {
  visibility: visible;
}
#letterN:checked ~ #letterNbutton {
  background-color: #1AA35A;
}
#letterN:checked ~ #letterNbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterO {
  display: none;
}
#letterO:checked ~ #overlayO {
  visibility: visible;
}
#letterO:checked ~ #letterObutton {
  background-color: #1AA35A;
  color: white;
}
#letterO:checked ~ #letterObox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterP {
  display: none;
}
#letterP:checked ~ #overlayP {
  visibility: visible;
}
#letterP:checked ~ #letterPbutton {
  background-color: #1AA35A;
}
#letterP:checked ~ #letterPbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterQ {
  display: none;
}
#letterQ:checked ~ #overlayQ {
  visibility: visible;
}
#letterQ:checked ~ #letterQbutton {
  background-color: #1AA35A;
}
#letterQ:checked ~ #letterQbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterR {
  display: none;
}
#letterR:checked ~ #overlayR {
  visibility: visible;
}
#letterR:checked ~ #letterRbutton {
  background-color: #1AA35A;
}
#letterR:checked ~ #letterRbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterS {
  display: none;
}
#letterS:checked ~ #overlayS {
  visibility: visible;
}
#letterS:checked ~ #letterSbutton {
  background-color: #1AA35A;
}
#letterS:checked ~ #letterSbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterT {
  display: none;
}
#letterT:checked ~ #overlayT {
  visibility: visible;
}
#letterT:checked ~ #letterTbutton {
  background-color: #1AA35A;
}
#letterT:checked ~ #letterTbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterU {
  display: none;
}
#letterU:checked ~ #overlayU {
  visibility: visible;
}
#letterU:checked ~ #letterUbutton {
  background-color: #1AA35A;
  color: white;
}
#letterU:checked ~ #letterUbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterV {
  display: none;
}
#letterV:checked ~ #overlayV {
  visibility: visible;
}
#letterV:checked ~ #letterVbutton {
  background-color: #1AA35A;
}
#letterV:checked ~ #letterVbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterX {
  display: none;
}
#letterX:checked ~ #overlayX {
  visibility: visible;
}
#letterX:checked ~ #letterXbutton {
  background-color: #1AA35A;
}
#letterX:checked ~ #letterXbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterY {
  display: none;
}
#letterY:checked ~ #overlayY {
  visibility: visible;
}
#letterY:checked ~ #letterYbutton {
  background-color: #1AA35A;
  color: white;
}
#letterY:checked ~ #letterYbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterZ {
  display: none;
}
#letterZ:checked ~ #overlayZ {
  visibility: visible;
}
#letterZ:checked ~ #letterZbutton {
  background-color: #1AA35A;
}
#letterZ:checked ~ #letterZbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterAE {
  display: none;
}
#letterAE:checked ~ #overlayAE {
  visibility: visible;
}
#letterAE:checked ~ #letterAEbutton {
  background-color: #1AA35A;
  color: white;
}
#letterAE:checked ~ #letterAEbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterOE {
  display: none;
}
#letterOE:checked ~ #overlayOE {
  visibility: visible;
}
#letterOE:checked ~ #letterOEbutton {
  background-color: #1AA35A;
  color: white;
}
#letterOE:checked ~ #letterOEbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
#letterAA {
  display: none;
}
#letterAA:checked ~ #overlayAA {
  visibility: visible;
}
#letterAA:checked ~ #letterAAbutton {
  background-color: #1AA35A;
  color: white;
}
#letterAA:checked ~ #letterAAbox {
  visibility: visible;
  animation: slide-in1 0.5s ease;
}
@keyframes slide-in1 {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(20%);
	}
}
@media only screen and (max-width: 1200px) {
  .show1 {width: 100%; transform: translateX(0%);}
}
@media only screen and (max-width: 1200px) {
  #letterAbox, #letterBbox, #letterCbox, #letterDbox, #letterEbox, #letterFbox, #letterGbox, #letterHbox, #letterIbox, #letterJbox, #letterKbox, #letterLbox, #letterMbox, #letterNbox, #letterObox, #letterPbox, #letterQbox, #letterRbox, #letterSbox, #letterTbox, #letterUbox, #letterVbox, #letterXbox, #letterYbox, #letterZbox, #letterAEbox, #letterOEbox, #letterAAbox {animation: slide-in1 0s;}
}
@media only screen and (max-width: 900px) {
  .tegn1 {width: 100px;font-size: 20px; margin-left:10px;}
}
.popup2 {
  top: 0;
	background-color: rgba(0, 0, 0, 0.575);
	height: 100%;
	width: 100%;
	position: absolute;
  z-index: 3;
  visibility: hidden;
}
.notyet {
  position: absolute;
  margin-top: 50px;
  margin-left: 20%;
  color: white;
  font-family: verdana;
  font-size: 60px;
  font-weight: 900;
}
.goBack1 {
  position: relative;
  margin-top: 300px;
  margin-left: 40%;
  width: 200px;
  height: 50px;
  border-radius: 20px;
  background-color: purple;
  color: white;
  font-size: 20px;
}
.goBack1:hover {
  background-color: black;
}
.winner {
  position: absolute;
  margin-top: 50px;
  margin-left: 20%;
  color: white;
  font-family: verdana;
  font-size: 60px;
  font-weight: 900;
}
.trophy {
  position: absolute;
  width: 200px;
  margin-top: 150px;
  margin-left: 300px;
  opacity: 0;
}
.div1 {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0;
}
#ball1 {
  position: absolute;
  margin-top: 200px;
  margin-left: 100px;
  width: 200px; 
  height: 200px;
  border-radius: 50%;
  /*transform-origin: bottom;*/
  transform-style: preserve-3d;
  background-image: radial-gradient(circle at top, hsl(var(--hue, 0), 100%, 75%), hsl(var(--hue, 0), 100%, 0%));
  animation: dot1 2s linear infinite;
}
@keyframes dot1 {
  0% {filter: hue-rotate(360deg); height: 160px; margin-top: 250px;}
  5% {margin-top: 200px; height: 200px;}
  50% {margin-top: 0px; height: 200px;}
  90% {margin-top: 200px; height: 200px;}
  100% {margin-top: 250px; height: 160px;}
}

.resultatALL {
  position: absolute;
  margin-top: 560px;
  left: 10px;
  visibility: hidden;
}
.tjek1 {
  margin-top: 535px;
  width: 99%;
  border-radius: 20px;
  background-color: purple;
  color: white;
  font-size: 20px;
}
.tjek1:hover {
  background-color: black;
}
              
            
!

JS

              
                function calculateA1() {
  var feedbackA1 = document.getElementById("numberA1").value;
    if (feedbackA1 == '1') {
      document.getElementById("feedbackA1").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackA1").style.backgroundColor = "red";
    value = 0;
    }
 document.getElementById("feedbackA1").value = value;
}
function calculateA2() {
    var feedbackA2 = document.getElementById("numberA2").value;
    if (feedbackA2 == '2') {
      document.getElementById("feedbackA2").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackA2").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackA2").value = value;
}
function calculateA3() {
    var feedbackA3 = document.getElementById("numberA3").value;
    if (feedbackA3 == '2') {
      document.getElementById("feedbackA3").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackA3").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackA3").value = value;
}
function calculateA4() {
    var feedbackA4 = document.getElementById("numberA4").value;
    if (feedbackA4 == '3') {
      document.getElementById("feedbackA4").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackA4").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackA4").value = value;
}
function resultat1() {
 var svar1 = feedbackA1.value;
 var svar2 = feedbackA2.value;
 var svar3 = feedbackA3.value;
 var svar4 = feedbackA4.value;
 var resultat1 = Number(svar1) + Number(svar2) + Number(svar3) + Number(svar4);
 document.getElementById("visresultat1").value = resultat1; 
  if (resultat1 == 4) {
    //document.getElementById("closeA").style.visibility = "visible";
    document.getElementById("visresultat1").style.background = "green";
    document.getElementById("letterAbutton").style.background = "purple";
    document.getElementById("letterAbutton").style.color = "white";
    }
  else if (resultat1 < 4) {
    document.getElementById("visresultat1").style.background = "red";
    }
}
/*
function closeA() {
  let inputs = document.getElementById('closeA');
  if (inputs.checked = true) {
      inputs.checked = document.getElementById("closeA").style.visibility = "hidden";
    document.getElementById("letterAbutton").style.background = "purple";
    document.getElementById("letterAbutton").style.color = "white";
  }
}*/
function calculateB1() {
  var feedbackB1 = document.getElementById("numberB1").value;
    if (feedbackB1 == '4') {
      document.getElementById("feedbackB1").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackB1").style.backgroundColor = "red";
    value = 0;
    }
 document.getElementById("feedbackB1").value = value;
}
function calculateB2() {
    var feedbackB2 = document.getElementById("numberB2").value;
    if (feedbackB2 == '3') {
      document.getElementById("feedbackB2").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackB2").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackB2").value = value;
}
function calculateB3() {
    var feedbackB3 = document.getElementById("numberB3").value;
    if (feedbackB3 == '4') {
      document.getElementById("feedbackB3").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackB3").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackB3").value = value;
}
function calculateB4() {
    var feedbackB4 = document.getElementById("numberB4").value;
    if (feedbackB4 == '3') {
      document.getElementById("feedbackB4").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackB4").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackB4").value = value;
}
function resultat2() {
 var svar1 = feedbackB1.value;
 var svar2 = feedbackB2.value;
 var svar3 = feedbackB3.value;
 var svar4 = feedbackB4.value;
 var resultat2 = Number(svar1) + Number(svar2) + Number(svar3) + Number(svar4);
 document.getElementById("visresultat2").value = resultat2; 
  if (resultat2 == 4) {
    //document.getElementById("closeB").style.visibility = "visible";
    document.getElementById("visresultat2").style.background = "green";
    document.getElementById("letterBbutton").style.background = "purple";
    document.getElementById("letterBbutton").style.color = "white";
    }
  else if (resultat2 < 4) {
    document.getElementById("visresultat2").style.background = "red";
    }
}
/*
function closeB() {
  let inputs = document.getElementById('closeB');
  if (inputs.checked = true) {
      inputs.checked = document.getElementById("closeB").style.visibility = "hidden";
    document.getElementById("letterBbutton").style.background = "purple";
    document.getElementById("letterBbutton").style.color = "white";
  }
}*/
function calculateC1() {
  var feedbackC1 = document.getElementById("numberC1").value;
    if (feedbackC1 == '4') {
      document.getElementById("feedbackC1").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackC1").style.backgroundColor = "red";
    value = 0;
    }
 document.getElementById("feedbackC1").value = value;
}
function calculateC2() {
    var feedbackC2 = document.getElementById("numberC2").value;
    if (feedbackC2 == '5') {
      document.getElementById("feedbackC2").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackC2").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackC2").value = value;
}
function calculateC3() {
    var feedbackC3 = document.getElementById("numberC3").value;
    if (feedbackC3 == '5') {
      document.getElementById("feedbackC3").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackC3").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackC3").value = value;
}
function calculateC4() {
    var feedbackC4 = document.getElementById("numberC4").value;
    if (feedbackC4 == '5') {
      document.getElementById("feedbackC4").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackC4").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackC4").value = value;
}
function resultat3() {
 var svar1 = feedbackC1.value;
 var svar2 = feedbackC2.value;
 var svar3 = feedbackC3.value;
 var svar4 = feedbackC4.value;
 var resultat3 = Number(svar1) + Number(svar2) + Number(svar3) + Number(svar4);
 document.getElementById("visresultat3").value = resultat3; 
  if (resultat3 == 4) {
    //document.getElementById("closeC").style.visibility = "visible";
    document.getElementById("visresultat3").style.background = "green";
    document.getElementById("letterCbutton").style.background = "purple";
    document.getElementById("letterCbutton").style.color = "white";
    }
  else if (resultat3 < 4) {
    document.getElementById("visresultat3").style.background = "red";
    }
}
/*
function closeC() {
  let inputs = document.getElementById('closeC');
  if (inputs.checked = true) {
      inputs.checked = document.getElementById("closeC").style.visibility = "hidden";
    document.getElementById("letterCbutton").style.background = "purple";
    document.getElementById("letterCbutton").style.color = "white";
  }
}*/
function calculateD1() {
  var feedbackD1 = document.getElementById("numberD1").value;
    if (feedbackD1 == '6') {
      document.getElementById("feedbackD1").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackD1").style.backgroundColor = "red";
    value = 0;
    }
 document.getElementById("feedbackD1").value = value;
}
function calculateD2() {
    var feedbackD2 = document.getElementById("numberD2").value;
    if (feedbackD2 == '6') {
      document.getElementById("feedbackD2").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackD2").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackD2").value = value;
}
function calculateD3() {
    var feedbackD3 = document.getElementById("numberD3").value;
    if (feedbackD3 == '6') {
      document.getElementById("feedbackD3").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackD3").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackD3").value = value;
}
function calculateD4() {
    var feedbackD4 = document.getElementById("numberD4").value;
    if (feedbackD4 == '6') {
      document.getElementById("feedbackD4").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackD4").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackD4").value = value;
}
function resultat4() {
 var svar1 = feedbackD1.value;
 var svar2 = feedbackD2.value;
 var svar3 = feedbackD3.value;
 var svar4 = feedbackD4.value;
 var resultat4 = Number(svar1) + Number(svar2) + Number(svar3) + Number(svar4);
 document.getElementById("visresultat4").value = resultat4; 
  if (resultat4 == 4) {
    //document.getElementById("closeD").style.visibility = "visible";
    document.getElementById("visresultat4").style.background = "green";
    document.getElementById("letterDbutton").style.background = "purple";
    document.getElementById("letterDbutton").style.color = "white";
    }
  else if (resultat4 < 4) {
    document.getElementById("visresultat4").style.background = "red";
    }
}
/*
function closeD() {
  let inputs = document.getElementById('closeD');
  if (inputs.checked = true) {
      inputs.checked = document.getElementById("closeD").style.visibility = "hidden";
    document.getElementById("letterDbutton").style.background = "purple";
    document.getElementById("letterDbutton").style.color = "white";
  }
}*/
function calculateE1() {
  var feedbackE1 = document.getElementById("numberE1").value;
    if (feedbackE1 == '7') {
      document.getElementById("feedbackE1").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackE1").style.backgroundColor = "red";
    value = 0;
    }
 document.getElementById("feedbackE1").value = value;
}
function calculateE2() {
    var feedbackE2 = document.getElementById("numberE2").value;
    if (feedbackE2 == '7') {
      document.getElementById("feedbackE2").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackE2").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackE2").value = value;
}
function calculateE3() {
    var feedbackE3 = document.getElementById("numberE3").value;
    if (feedbackE3 == '7') {
      document.getElementById("feedbackE3").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackE3").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackE3").value = value;
}
function calculateE4() {
    var feedbackE4 = document.getElementById("numberE4").value;
    if (feedbackE4 == '7') {
      document.getElementById("feedbackE4").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackE4").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackE4").value = value;
}
function resultat5() {
 var svar1 = feedbackE1.value;
 var svar2 = feedbackE2.value;
 var svar3 = feedbackE3.value;
 var svar4 = feedbackE4.value;
 var resultat5 = Number(svar1) + Number(svar2) + Number(svar3) + Number(svar4);
 document.getElementById("visresultat5").value = resultat5; 
  if (resultat5 == 4) {
    //document.getElementById("closeE").style.visibility = "visible";
    document.getElementById("visresultat5").style.background = "green";
    document.getElementById("letterEbutton").style.background = "purple";
    document.getElementById("letterEbutton").style.color = "white";
    }
  else if (resultat5 < 4) {
    document.getElementById("visresultat5").style.background = "red";
    }
}
/*
function closeE() {
  let inputs = document.getElementById('closeE');
  if (inputs.checked = true) {
      inputs.checked = document.getElementById("closeE").style.visibility = "hidden";
    document.getElementById("letterEbutton").style.background = "purple";
    document.getElementById("letterEbutton").style.color = "white";
  }
}*/
function calculateF1() {
  var feedbackF1 = document.getElementById("numberF1").value;
    if (feedbackF1 == '8') {
      document.getElementById("feedbackF1").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackF1").style.backgroundColor = "red";
    value = 0;
    }
 document.getElementById("feedbackF1").value = value;
}
function calculateF2() {
    var feedbackF2 = document.getElementById("numberF2").value;
    if (feedbackF2 == '8') {
      document.getElementById("feedbackF2").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackF2").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackF2").value = value;
}
function calculateF3() {
    var feedbackF3 = document.getElementById("numberF3").value;
    if (feedbackF3 == '8') {
      document.getElementById("feedbackF3").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackF3").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackF3").value = value;
}
function calculateF4() {
    var feedbackF4 = document.getElementById("numberF4").value;
    if (feedbackF4 == '8') {
      document.getElementById("feedbackF4").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackF4").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackF4").value = value;
}
function resultat6() {
 var svar1 = feedbackF1.value;
 var svar2 = feedbackF2.value;
 var svar3 = feedbackF3.value;
 var svar4 = feedbackF4.value;
 var resultat6 = Number(svar1) + Number(svar2) + Number(svar3) + Number(svar4);
 document.getElementById("visresultat6").value = resultat6; 
  if (resultat6 == 4) {
    //document.getElementById("closeF").style.visibility = "visible";
    document.getElementById("visresultat6").style.background = "green";
    document.getElementById("letterFbutton").style.background = "purple";
    document.getElementById("letterFbutton").style.color = "white";
    }
  else if (resultat6 < 4) {
    document.getElementById("visresultat6").style.background = "red";
    }
}
/*
function closeF() {
  let inputs = document.getElementById('closeF');
  if (inputs.checked = true) {
      inputs.checked = document.getElementById("closeF").style.visibility = "hidden";
    document.getElementById("letterFbutton").style.background = "purple";
    document.getElementById("letterFbutton").style.color = "white";
  }
}*/
function calculateG1() {
  var feedbackG1 = document.getElementById("numberG1").value;
    if (feedbackG1 == '9') {
      document.getElementById("feedbackG1").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackG1").style.backgroundColor = "red";
    value = 0;
    }
 document.getElementById("feedbackG1").value = value;
}
function calculateG2() {
    var feedbackG2 = document.getElementById("numberG2").value;
    if (feedbackG2 == '9') {
      document.getElementById("feedbackG2").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackG2").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackG2").value = value;
}
function calculateG3() {
    var feedbackG3 = document.getElementById("numberG3").value;
    if (feedbackG3 == '9') {
      document.getElementById("feedbackG3").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackG3").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackG3").value = value;
}
function calculateG4() {
    var feedbackG4 = document.getElementById("numberG4").value;
    if (feedbackG4 == '9') {
      document.getElementById("feedbackG4").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackG4").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackG4").value = value;
}
function resultat7() {
 var svar1 = feedbackG1.value;
 var svar2 = feedbackG2.value;
 var svar3 = feedbackG3.value;
 var svar4 = feedbackG4.value;
 var resultat7 = Number(svar1) + Number(svar2) + Number(svar3) + Number(svar4);
 document.getElementById("visresultat7").value = resultat7; 
  if (resultat7 == 4) {
    //document.getElementById("closeG").style.visibility = "visible";
    document.getElementById("visresultat7").style.background = "green";
    document.getElementById("letterGbutton").style.background = "purple";
    document.getElementById("letterGbutton").style.color = "white";
    }
  else if (resultat7 < 4) {
    document.getElementById("visresultat7").style.background = "red";
    }
}
/*
function closeG() {
  let inputs = document.getElementById('closeG');
  if (inputs.checked = true) {
      inputs.checked = document.getElementById("closeG").style.visibility = "hidden";
    document.getElementById("letterGbutton").style.background = "purple";
    document.getElementById("letterGbutton").style.color = "white";
  }
}*/
function calculateH1() {
  var feedbackH1 = document.getElementById("numberH1").value;
    if (feedbackH1 == '4') {
      document.getElementById("feedbackH1").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackH1").style.backgroundColor = "red";
    value = 0;
    }
 document.getElementById("feedbackH1").value = value;
}
function calculateH2() {
    var feedbackH2 = document.getElementById("numberH2").value;
    if (feedbackH2 == '5') {
      document.getElementById("feedbackH2").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackH2").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackH2").value = value;
}
function calculateH3() {
    var feedbackH3 = document.getElementById("numberH3").value;
    if (feedbackH3 == '6') {
      document.getElementById("feedbackH3").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackH3").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackH3").value = value;
}
function calculateH4() {
    var feedbackH4 = document.getElementById("numberH4").value;
    if (feedbackH4 == '6') {
      document.getElementById("feedbackH4").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackH4").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackH4").value = value;
}
function resultat8() {
 var svar1 = feedbackH1.value;
 var svar2 = feedbackH2.value;
 var svar3 = feedbackH3.value;
 var svar4 = feedbackH4.value;
 var resultat8 = Number(svar1) + Number(svar2) + Number(svar3) + Number(svar4);
 document.getElementById("visresultat8").value = resultat8; 
  if (resultat8 == 4) {
    //document.getElementById("closeH").style.visibility = "visible";
    document.getElementById("visresultat8").style.background = "green";
    document.getElementById("letterHbutton").style.background = "purple";
    document.getElementById("letterHbutton").style.color = "white";
    }
  else if (resultat8 < 4) {
    document.getElementById("visresultat8").style.background = "red";
    }
}
/*
function closeH() {
  let inputs = document.getElementById('closeH');
  if (inputs.checked = true) {
      inputs.checked = document.getElementById("closeH").style.visibility = "hidden";
    document.getElementById("letterHbutton").style.background = "purple";
    document.getElementById("letterHbutton").style.color = "white";
  }
}*/
function calculateI1() {
  var feedbackI1 = document.getElementById("numberI1").value;
    if (feedbackI1 == '7') {
      document.getElementById("feedbackI1").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackI1").style.backgroundColor = "red";
    value = 0;
    }
 document.getElementById("feedbackI1").value = value;
}
function calculateI2() {
    var feedbackI2 = document.getElementById("numberI2").value;
    if (feedbackI2 == '7') {
      document.getElementById("feedbackI2").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackI2").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackI2").value = value;
}
function calculateI3() {
    var feedbackI3 = document.getElementById("numberI3").value;
    if (feedbackI3 == '7') {
      document.getElementById("feedbackI3").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackI3").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackI3").value = value;
}
function calculateI4() {
    var feedbackI4 = document.getElementById("numberI4").value;
    if (feedbackI4 == '9') {
      document.getElementById("feedbackI4").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackI4").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackI4").value = value;
}
function resultat9() {
 var svar1 = feedbackI1.value;
 var svar2 = feedbackI2.value;
 var svar3 = feedbackI3.value;
 var svar4 = feedbackI4.value;
 var resultat9 = Number(svar1) + Number(svar2) + Number(svar3) + Number(svar4);
 document.getElementById("visresultat9").value = resultat9; 
  if (resultat9 == 4) {
    //document.getElementById("closeI").style.visibility = "visible";
    document.getElementById("visresultat9").style.background = "green";
    document.getElementById("letterIbutton").style.background = "purple";
    document.getElementById("letterIbutton").style.color = "white";
    }
  else if (resultat9 < 4) {
    document.getElementById("visresultat9").style.background = "red";
    }
}
/*
function closeI() {
  let inputs = document.getElementById('closeI');
  if (inputs.checked = true) {
      inputs.checked = document.getElementById("closeI").style.visibility = "hidden";
    document.getElementById("letterIbutton").style.background = "purple";
    document.getElementById("letterIbutton").style.color = "white";
  }
}*/
function calculateJ1() {
  var feedbackJ1 = document.getElementById("numberJ1").value;
    if (feedbackJ1 == '8') {
      document.getElementById("feedbackJ1").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackJ1").style.backgroundColor = "red";
    value = 0;
    }
 document.getElementById("feedbackJ1").value = value;
}
function calculateJ2() {
    var feedbackJ2 = document.getElementById("numberJ2").value;
    if (feedbackJ2 == '8') {
      document.getElementById("feedbackJ2").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackJ2").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackJ2").value = value;
}
function calculateJ3() {
    var feedbackJ3 = document.getElementById("numberJ3").value;
    if (feedbackJ3 == '8') {
      document.getElementById("feedbackJ3").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackJ3").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackJ3").value = value;
}
function calculateJ4() {
    var feedbackJ4 = document.getElementById("numberJ4").value;
    if (feedbackJ4 == '9') {
      document.getElementById("feedbackJ4").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackJ4").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackJ4").value = value;
}
function resultat10() {
 var svar1 = feedbackJ1.value;
 var svar2 = feedbackJ2.value;
 var svar3 = feedbackJ3.value;
 var svar4 = feedbackJ4.value;
 var resultat10 = Number(svar1) + Number(svar2) + Number(svar3) + Number(svar4);
 document.getElementById("visresultat10").value = resultat10; 
  if (resultat10 == 4) {
    //document.getElementById("closeJ").style.visibility = "visible";
    document.getElementById("visresultat10").style.background = "green";
    document.getElementById("letterJbutton").style.background = "purple";
    document.getElementById("letterJbutton").style.color = "white";
    }
  else if (resultat10 < 4) {
    document.getElementById("visresultat10").style.background = "red";
    }
}
/*
function closeJ() {
  let inputs = document.getElementById('closeJ');
  if (inputs.checked = true) {
      inputs.checked = document.getElementById("closeJ").style.visibility = "hidden";
    document.getElementById("letterJbutton").style.background = "purple";
    document.getElementById("letterJbutton").style.color = "white";
  }
}*/
function calculateK1() {
  var feedbackK1 = document.getElementById("numberK1").value;
    if (feedbackK1 == '9') {
      document.getElementById("feedbackK1").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackK1").style.backgroundColor = "red";
    value = 0;
    }
 document.getElementById("feedbackK1").value = value;
}
function calculateK2() {
    var feedbackK2 = document.getElementById("numberK2").value;
    if (feedbackK2 == '9') {
      document.getElementById("feedbackK2").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackK2").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackK2").value = value;
}
function calculateK3() {
    var feedbackK3 = document.getElementById("numberK3").value;
    if (feedbackK3 == '9') {
      document.getElementById("feedbackK3").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackK3").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackK3").value = value;
}
function calculateK4() {
    var feedbackK4 = document.getElementById("numberK4").value;
    if (feedbackK4 == '9') {
      document.getElementById("feedbackK4").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackK4").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackK4").value = value;
}
function resultat11() {
 var svar1 = feedbackK1.value;
 var svar2 = feedbackK2.value;
 var svar3 = feedbackK3.value;
 var svar4 = feedbackK4.value;
 var resultat11 = Number(svar1) + Number(svar2) + Number(svar3) + Number(svar4);
 document.getElementById("visresultat11").value = resultat11; 
  if (resultat11 == 4) {
    //document.getElementById("closeK").style.visibility = "visible";
    document.getElementById("visresultat11").style.background = "green";
    document.getElementById("letterKbutton").style.background = "purple";
    document.getElementById("letterKbutton").style.color = "white";
    }
  else if (resultat11 < 4) {
    document.getElementById("visresultat11").style.background = "red";
    }
}
/*
function closeK() {
  let inputs = document.getElementById('closeK');
  if (inputs.checked = true) {
      inputs.checked = document.getElementById("closeK").style.visibility = "hidden";
    document.getElementById("letterKbutton").style.background = "purple";
    document.getElementById("letterKbutton").style.color = "white";
  }
}*/
function calculateL1() {
  var feedbackL1 = document.getElementById("numberL1").value;
    if (feedbackL1 == '10') {
      document.getElementById("feedbackL1").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackL1").style.backgroundColor = "red";
    value = 0;
    }
 document.getElementById("feedbackL1").value = value;
}
function calculateL2() {
    var feedbackL2 = document.getElementById("numberL2").value;
    if (feedbackL2 == '10') {
      document.getElementById("feedbackL2").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackL2").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackL2").value = value;
}
function calculateL3() {
    var feedbackL3 = document.getElementById("numberL3").value;
    if (feedbackL3 == '10') {
      document.getElementById("feedbackL3").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackL3").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackL3").value = value;
}
function calculateL4() {
    var feedbackL4 = document.getElementById("numberL4").value;
    if (feedbackL4 == '10') {
      document.getElementById("feedbackL4").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackL4").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackL4").value = value;
}
function resultat12() {
 var svar1 = feedbackL1.value;
 var svar2 = feedbackL2.value;
 var svar3 = feedbackL3.value;
 var svar4 = feedbackL4.value;
 var resultat12 = Number(svar1) + Number(svar2) + Number(svar3) + Number(svar4);
 document.getElementById("visresultat12").value = resultat12; 
  if (resultat12 == 4) {
    //document.getElementById("closeL").style.visibility = "visible";
    document.getElementById("visresultat12").style.background = "green";
    document.getElementById("letterLbutton").style.background = "purple";
    document.getElementById("letterLbutton").style.color = "white";
    }
  else if (resultat12 < 4) {
    document.getElementById("visresultat12").style.background = "red";
    }
}
/*
function closeL() {
  let inputs = document.getElementById('closeL');
  if (inputs.checked = true) {
      inputs.checked = document.getElementById("closeL").style.visibility = "hidden";
    document.getElementById("letterLbutton").style.background = "purple";
    document.getElementById("letterLbutton").style.color = "white";
  }
}*/
function calculateM1() {
  var feedbackM1 = document.getElementById("numberM1").value;
    if (feedbackM1 == '10') {
      document.getElementById("feedbackM1").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackM1").style.backgroundColor = "red";
    value = 0;
    }
 document.getElementById("feedbackM1").value = value;
}
function calculateM2() {
    var feedbackM2 = document.getElementById("numberM2").value;
    if (feedbackM2 == '10') {
      document.getElementById("feedbackM2").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackM2").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackM2").value = value;
}
function calculateM3() {
    var feedbackM3 = document.getElementById("numberM3").value;
    if (feedbackM3 == '10') {
      document.getElementById("feedbackM3").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackM3").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackM3").value = value;
}
function calculateM4() {
    var feedbackM4 = document.getElementById("numberM4").value;
    if (feedbackM4 == '10') {
      document.getElementById("feedbackM4").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackM4").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackM4").value = value;
}
function resultat13() {
 var svar1 = feedbackM1.value;
 var svar2 = feedbackM2.value;
 var svar3 = feedbackM3.value;
 var svar4 = feedbackM4.value;
 var resultat13 = Number(svar1) + Number(svar2) + Number(svar3) + Number(svar4);
 document.getElementById("visresultat13").value = resultat13; 
  if (resultat13 == 4) {
    //document.getElementById("closeM").style.visibility = "visible";
    document.getElementById("visresultat13").style.background = "green";
    document.getElementById("letterMbutton").style.background = "purple";
    document.getElementById("letterMbutton").style.color = "white";
    }
  else if (resultat13 < 4) {
    document.getElementById("visresultat13").style.background = "red";
    }
}
/*
function closeM() {
  let inputs = document.getElementById('closeM');
  if (inputs.checked = true) {
      inputs.checked = document.getElementById("closeM").style.visibility = "hidden";
    document.getElementById("letterMbutton").style.background = "purple";
    document.getElementById("letterMbutton").style.color = "white";
  }
}*/
function calculateN1() {
  var feedbackN1 = document.getElementById("numberN1").value;
    if (feedbackN1 == '10') {
      document.getElementById("feedbackN1").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackN1").style.backgroundColor = "red";
    value = 0;
    }
 document.getElementById("feedbackN1").value = value;
}
function calculateN2() {
    var feedbackN2 = document.getElementById("numberN2").value;
    if (feedbackN2 == '10') {
      document.getElementById("feedbackN2").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackN2").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackN2").value = value;
}
function calculateN3() {
    var feedbackN3 = document.getElementById("numberN3").value;
    if (feedbackN3 == '10') {
      document.getElementById("feedbackN3").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackN3").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackN3").value = value;
}
function calculateN4() {
    var feedbackN4 = document.getElementById("numberN4").value;
    if (feedbackN4 == '10') {
      document.getElementById("feedbackN4").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackN4").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackN4").value = value;
}
function resultat14() {
 var svar1 = feedbackN1.value;
 var svar2 = feedbackN2.value;
 var svar3 = feedbackN3.value;
 var svar4 = feedbackN4.value;
 var resultat14 = Number(svar1) + Number(svar2) + Number(svar3) + Number(svar4);
 document.getElementById("visresultat14").value = resultat14; 
  if (resultat14 == 4) {
    //document.getElementById("closeN").style.visibility = "visible";
    document.getElementById("visresultat14").style.background = "green";
    document.getElementById("letterNbutton").style.background = "purple";
    document.getElementById("letterNbutton").style.color = "white";
    }
  else if (resultat14 < 4) {
    document.getElementById("visresultat14").style.background = "red";
    }
}
/*
function closeN() {
  let inputs = document.getElementById('closeN');
  if (inputs.checked = true) {
      inputs.checked = document.getElementById("closeN").style.visibility = "hidden";
    document.getElementById("letterNbutton").style.background = "purple";
    document.getElementById("letterNbutton").style.color = "white";
  }
}*/
function calculateO1() {
  var feedbackO1 = document.getElementById("numberO1").value;
    if (feedbackO1 == '10') {
      document.getElementById("feedbackO1").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackO1").style.backgroundColor = "red";
    value = 0;
    }
 document.getElementById("feedbackO1").value = value;
}
function calculateO2() {
    var feedbackO2 = document.getElementById("numberO2").value;
    if (feedbackO2 == '8') {
      document.getElementById("feedbackO2").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackO2").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackO2").value = value;
}
function calculateO3() {
    var feedbackO3 = document.getElementById("numberO3").value;
    if (feedbackO3 == '6') {
      document.getElementById("feedbackO3").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackO3").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackO3").value = value;
}
function calculateO4() {
    var feedbackO4 = document.getElementById("numberO4").value;
    if (feedbackO4 == '4') {
      document.getElementById("feedbackO4").style.backgroundColor = "green";
      value = 1;
    }
  else {
    document.getElementById("feedbackO4").style.backgroundColor = "red";
    value = 0;
    }
  document.getElementById("feedbackO4").value = value;
}
function resultat15() {
 var svar1 = feedbackO1.value;
 var svar2 = feedbackO2.value;
 var svar3 = feedbackO3.value;
 var svar4 = feedbackO4.value;
 var resultat15 = Number(svar1) + Number(svar2) + Number(svar3) + Number(svar4);
 document.getElementById("visresultat15").value = resultat15; 
  if (resultat15 == 4) {
    //document.getElementById("closeO").style.visibility = "visible";
    document.getElementById("visresultat15").style.background = "green";
    document.getElementById("letterObutton").style.background = "purple";
    document.getElementById("letterObutton").style.color = "white";
    }
  else if (resultat15 < 4) {
    document.getElementById("visresultat15").style.background = "red";
    }
}
/*
function closeO() {
  let inputs = document.getElementById('closeO');
  if (inputs.checked = true) {
      inputs.checked = document.getElementById("closeO").style.visibility = "hidden";
    document.getElementById("letterObutton").style.background = "purple";
    document.getElementById("letterObutton").style.color = "white";
  }
}*/

function Price1() {
  var svar1 = document.getElementById("visresultat1").value;
  var svar2 = document.getElementById("visresultat2").value;
  var svar3 = document.getElementById("visresultat3").value;
  var svar4 = document.getElementById("visresultat4").value;
  var svar5 = document.getElementById("visresultat5").value;
  var svar6 = document.getElementById("visresultat6").value;
  var svar7 = document.getElementById("visresultat7").value;
  var svar8 = document.getElementById("visresultat8").value;
  var svar9 = document.getElementById("visresultat9").value;
  var svar10 = document.getElementById("visresultat10").value;
  var svar11 = document.getElementById("visresultat11").value;
  var svar12 = document.getElementById("visresultat12").value;
  var svar13 = document.getElementById("visresultat13").value;
  var svar14 = document.getElementById("visresultat14").value;
  var svar15 = document.getElementById("visresultat15").value;
  var resultatALL = Number(svar1) + Number(svar2) + Number(svar3) + Number(svar4) + Number(svar5) + Number(svar6) + Number(svar7) + Number(svar8) + Number(svar9) + Number(svar10) + Number(svar11) + Number(svar12) + Number(svar13) + Number(svar14) + Number(svar15);
  document.getElementById("resultatALL").value = resultatALL;
  if (resultatALL == 60) {
    document.getElementById("overlayWIN").style.visibility = "visible";
    document.getElementById("div1").style.opacity = 1;
    document.getElementById("trophy").style.opacity = 1;
    }
  else if (resultatALL < 60) {
    document.getElementById("overlayNO").style.visibility = "visible";
    }
}
function NotYet() {
  let inputs = document.getElementById('goBack1');
  if (inputs.checked = true) {
      inputs.checked = document.getElementById("overlayNO").style.visibility = "hidden";
    
  }
}
              
            
!
999px

Console