title: Randomly choose img between foldersl in html
body: <p>I have a huge code to programe and I'm stuck.</p>
  
  <p>I'm doing a game with 4 documents: html, css, javascript and jquery. The game it's about trying to guess 20 different countries of the world with different images. I'm stuck at the point that I don't know what do I have to do so every turn of the game it automaticaly choose between the pictures. Also, it has only to display the first picture, and if the player clicks on the button to get a hint, then the other pictures start to show.</p>
  
  <p>I have all the images organized by this:
  img/
  img/countryname/
  img/countryname/countryname01.jpg
  img/countryname/countryname02.jpg
  img/countryname/countryname03.jpg
  img/countryname/countryname04.jpg</p>
  
  <p>On my html document I created a the following div:</p>
  
  <pre><code>&lt;pre&gt;
  &lt;div id="country"&gt;
      &lt;div id="hint0"&gt;
          &lt;!--choose randomly "img/countryname/countryname01.jpg"--&gt;
      &lt;/div&gt;
      &lt;div id="hint1" class="hint" style="display: none"&gt;
          &lt;!--choose randomly "img/countryname/countryname02.jpg"--&gt;
      &lt;/div&gt;
      &lt;div id="pista2" class="pista" style="display: none"&gt;
          &lt;!--choose randomly "img/countryname/countryname03.jpg"--&gt;
      &lt;/div&gt;
      &lt;div id="pista3" class="pista" style="display: none"&gt;
          &lt;!--choose randomly "img/countryname/countryname03.jpg"--&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/pre&gt;
  </code></pre>