kein Echo von Bildern in HTML

Als Lehrer möchte ich mit Bildern mit meinen Schülern arbeiten. Zum Codieren bin ich ein Neuling und hoffe auf jemanden, der mir helfen kann.kein Echo von Bildern in HTML

Auf meiner Website zeige ich Bilder als Würfel. Student kann die Würfel "trow" und Bilder miteinander verbinden.

Ich bin auf der Suche nach einem Code, mit dem ein Bild nur einmal hintereinander angezeigt werden kann. Nun kann es vorkommen, dass das gleiche Bild doppelt oder dreifach hintereinander erscheint.

mein HTML-Code (in diesem Beispiel 'china')

<!DOCTYPE html> 
<html lang="nl"><head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta name="robots" content="index, follow"> 
<meta name="msvalidate.01" content="23F65DC014C1D0899A8342963C5E810C"> 
<title>Aardrijkskunde dobbelstenen gooien. Weet jij welke begrippen bij elkaar horen?</title> 

<meta property="og:locale" content="nl_NL"> 
<meta property="og:image" content="http://www.home.deds.nl"> 
<meta property="og:url" content="htpp://www.home.deds.nl/"> 
<meta property="og:site_name" content="dobbelsteen"> 

<style type="text/css">body { font-family : 'Calibri', sans-serif; font-size : 100%; line-height : 150%; margin : 0; padding : 0; color : #fff; background-color : #333; } #wrapper { width : 80%; margin : 0 auto; padding : 10px 5%; background-color : #333; } #adv, #content, #content2, #header, #social { width : 100%; } #header { text-align : left; border-bottom : 10px solid #333; background-color : #333; } #headerleft { float : left; width : 70%; } .spandices { float : left; width : 225px; margin-top : 10px; } #banner { float : right; width : 30%; } #adv, #content, #social { text-align : center; } #content { clear : both; background-color : #333; } #social { margin-top : 15px; } #adv { margin-right : auto; margin-left : auto; } #content2 { margin-top : 20px; border-top : 10px solid #333; background-color : #eee; } .content2left, .content2right { width : 48%; text-align : left; } .content2left { float : left; padding-right : 2%; } .content2right { float : right; padding-left : 2%; } .clearfix:after { line-height : 0; display : block; visibility : hidden; clear : both; height : 0; content : '.'; } #shuffle_button, #shuffle_button_again { font-size : 110%; font-weight : 400; width : 200px; height : 50px; padding : 1px; color : #fff; cursor : pointer; border : none; border-radius : 10px; background-color : #ff7d01; } select { margin-right : 20px; } #language { float : right; height : 50px; } .language { margin-right : 5px; } .diceimg { margin : 10px; border-radius : 50px; } #dice { position : relative; width : 150px; height : 150px; border : 200px; } #result { position : absolute; top : 0; width : 0; height : 0; text-align : center; } .presult { margin : 10px; } img { margin : 0px; padding : 0px; border : none; } ul { text-decoration : none; } h1 { font-size : 3.5em; font-weight : 700; color : #ff7d01; } h2 { font-size : 2em; font-weight : 400; line-height : 120%; margin : 15px 0 5px; color : #000; } .total { font-size : 0; text-decoration : underline; color : #333; } h3 { font-size : 1.5em; font-weight : 700; margin : 10px 0; } p { font-size : 100%; color : #333; } a { text-decoration : underline; color : #222; } a:visited { text-decoration : none; } @media screen and (max-width:767px) { .quickrole { display : none; } h1 { font-size : 2em; } h2 { font-size : 1.4em; line-height : 120%; margin : 15px 0 5px; } .selectiondice { width : 100%; } select { height : 30px; margin-right : 100px; margin-bottom : 10px; } #shuffle_button { width : 100%; margin : 10px 0; } .diceimg { width : 25%; height : 25%; } .content2left, .content2right { width : 100%; } .spandices { width : 100%; margin-top : 10px; } } @media screen and (max-width:1024px) { #wrapper { width : 90%; padding : 0 5%; } #banner, #headerleft { float : left; width : 100%; } }</style> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<script type="text/javascript" async="" src="http://www.google-analytics.com/plugins/ua/linkid.js"></script><script src="https://pagead2.googlesyndication.com/pub-config/ca-pub-0183057368353561.js"></script><script id="twitter-wjs" src="http://platform.twitter.com/widgets.js"></script><script async="" src="//www.google-analytics.com/analytics.js"></script><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" defer=""></script> 
<script type="text/javascript" src="roledicechina.min.js" defer=""></script> 


</head> 

<body style=""> 
<div id="wrapper"> 
    <div id="header" class="clearfix"> 

     <h1>Aardrijkskunde dobbelstenen</h1> 
     <h2>Gooi snel meerdere aardrijkskundige dobbelstenen</h2> 
     Aantal plaatjes: <select id="dropdown_met_aantal_plaatjes"> 
       <option value="1">1</option> 
       <option value="2" selected="selected">2</option> 
       <option value="3">3</option> 
       <option value="4">4</option> 
       <option value="5">5</option> 
       <option value="6">6</option> 

       </select> 

       Aantal verschillende plaatjes: <select id="dropdown_met_aantal_verschillende_plaatjes"> 

       <option value="2">2</option> 
       <option value="3">3</option> 
       <option value="4">4</option> 
       <option value="5">5</option> 
       <option value="6">6</option> 
       <option value="7">7</option> 
       <option value="8">8</option> 
       <option value="9"selected="selected">9</option> 
       </select> 





       <button onclick="ga('send', 'event', 'Dobbelsteen', 'Gooi', 'NL');" id="shuffle_button">Gooi!</button> 

      <p class="quickrole"><b></b></p> 
     </div> 


    </div> 
    <div id="content"><img class="" width="150" height="150" src="" alt="Online dobbelsteen: 4" style="display: inline;"> 
     <div id="social"> 
     <button id="shuffle_button_again" onclick="ga('send', 'event', 'Dobbelsteen', 'Gooi opnieuw', 'NL');">Gooi opnieuw!</button> 
     </div> 
    <div id="content2" class="clearfix"> 


    </div> 
</div> 

<iframe id="rufous-sandbox" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" style="position: absolute; visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px; border: none;"></iframe></body></html>

Weitere Javascript

$(function() { 
    function n() { 
     for (var n = "", t = parseInt($("#dropdown_met_aantal_plaatjes").val()), e = parseInt($("#dropdown_met_aantal_verschillende_plaatjes").val()), o = 12, a = 0; t > a; a++) { 
      var i = 1 + Math.floor(Math.random() * e); 
      o += i, n += "<img class='diceimg' width='400' height='400' src='/china/dice" + i + ".png' alt='Aardrijkskunde Dobbel" + i + "' />" 
      }  

     n += "<h2 class='total'>+ " + o + " + </h2>", $("#content").html(n), $("#content img").hide().each(function(n) { 
      $(this).delay(25 * n).show(100) 
     }) 
    } 
    $(document).keypress(function(t) { 
     (13 == t.which || 32 == t.which) && n() 
    }), $("#shuffle_button").click(function() { 
     n() 
    }), $("#shuffle_button_again").click(function() { 
     n() 
    }), n() 
});

Wie von Ihnen zu hören.

Erik Meerveld

Quelle

2016-10-30 Erik Meerveld

Ein Ansatz wäre die „gerollt“ Bilder in einem Array zu speichern, die Sie nachschlagen können und wieder rollen, wenn das Bild bereits aufgenommen wurde: Auch

var selectedImages = []; //list of previously rolled images. 
    for (var n = "", t = parseInt($("#dropdown_met_aantal_plaatjes").val()), e = parseInt($("#dropdown_met_aantal_verschillende_plaatjes").val()), o = 12, a = 0; t > a; a++) { 
     var i = 1 + Math.floor(Math.random() * e); 

     //while the array isn't empty (the first loop iteration) 
     //and value of i isn't already in the array, re-roll. 
     while (selectedImages.length != 0 && selectedImages.indexOf(i) != -1) { 
      i = 1 + Math.floor(Math.random() * e); 
     } 
     selectedImages.push(i); //add to array so it doesn't get selected again. 
     // ... rest of your code follows

Vielleicht sollten Sie in Betracht ziehen, mehr beschreibende Variablennamen anstelle von Ein-Zeichen-Namen zu verwenden. Es wird viel einfacher für Sie (und für alle anderen) in der Zukunft zu halten.

Demo

Quelle

2016-10-30 00:25:57 xorspark

Es lookslike dies funktionieren wird. Das ist, was ich gesucht habe. Danke vielmals. –

Hier ist ein weiterer Ansatz, auch ein Array mit der bereits speichern Zahlen gerollt und Wiederholung, wenn sie zusammenpassen:

$(function() { 
    function n() { 
    var testArray = []; 
     for (var n = "", t = parseInt($("#dropdown_met_aantal_plaatjes").val()), e = parseInt($("#dropdown_met_aantal_verschillende_plaatjes").val()), o = 12, a = 0; t > a; a++) { 
      var i = 1 + Math.floor(Math.random() * e); 
      if ($.inArray(i,testArray) === -1) { 
      o += i, n += "<img class='diceimg' width='400' height='400' src='/china/dice" + i + ".png' alt='Aardrijkskunde Dobbel" + i + "' />" 
      testArray[a] = i; 
      } else { 
      a--; 
      } 
      } 
     n += "<h2 class='total'>+ " + o + " + </h2>", $("#content").html(n), $("#content img").hide().each(function(n) { 
      $(this).delay(25 * n).show(100) 
     }) 
console.log(testArray); 
    } 
    $(document).keypress(function(t) { 
     (13 == t.which || 32 == t.which) && n() 
    }), $("#shuffle_button").click(function() { 
     n() 
    }), $("#shuffle_button_again").click(function() { 
     n() 
    }), n() 
});

Quelle

2016-10-30 00:33:20 junkfoodjunkie

kein Echo von Bildern in HTML

Antwort

Verwandte Themen