Edit on
<body>
  
  <div id="frame">
  <section>
    <div class="window"></div>
    <p class="label"></p>
  </section>

  <section>
    <div class="window"></div>
    <p class="label"></p>
  </section>
    
    <br />

  <section>
    <div class="window"></div>
    <p class="label"></p>
  </section>

  <section>
    <div class="window"></div>
    <p class="label"></p>
  </section>
 </div>

</body>
@import url(https://fonts.googleapis.com/css?family=Cedarville+Cursive);
* { box-sizing:border-box; } 
body { background-color: skyblue; }
#frame {  text-align: center; margin: 10px; background: linear-gradient(to bottom right, #37261e,#795342); display: inline-block; padding: 20px; box-shadow: 5px 5px 20px #000; }
section { display: inline-block; border: 10px solid #684D41; border-style: inset; margin: 10px 5px; background-color: #231918;}
.window { width: 200px; height: 200px; padding: 20px 20px 0; }
iframe { width: 100%; height: 100%; background: none; border: none; overflow: hidden; }
.label { color: #DCD3CE; font-family: 'Cedarville Cursive', cursive; font-size: 30px; padding: 0; margin: 0 0 20px;}
$(function(){

  /*** init variables ***/

  // just a bucket of things
  var things = [
    { module: 'sky', label: 'the sky'},
    { module: 'bell', label: 'the bells'},
    { module: 'bilboquet', label: 'th bilboquets' },
    { module: 'apple', label: 'the apple'},
    { module: 'hat', label: 'the hat' },
    { module: 'javascript', label: 'the javascript' },
    { module: 'rooster', label: 'the rooster' }
  ];

  var $sections = $('section');

  // keep track of each window/label used
  var usedGoods = [];
  var randomCorrectWindowId = Math.floor(Math.random() * 4);

  /*** helper functions ***/

  // returns id of object not yet used
  var generateRandomThing = function() {
    var usableId;
    var need = true;

    while ( need ) {
      usableId = Math.floor(Math.random() * things.length);

      // if x is not in usedGoods, set need to false and set as used
      if ( usedGoods.indexOf(usableId) === -1 ) {
        usedGoods.push(usableId)
        need = false;
      }
    }

    return usableId;
  };
  

  /*** let's generate some friggin art ***/

  // for each section
  $sections.each(function(i){
    // generate random window and label to use
    var windowId = generateRandomThing();
    var labelId;

    // if random correct window, label and window IDs are the same
    if ( i === randomCorrectWindowId ) {
      labelId = windowId;
    }
    else {
      labelId = generateRandomThing();
    }

    // embed iframe of corresponding module
    var $iframe = $('<iframe>');
    $iframe.attr({
      'src': 'http://vart.institute/magritte/modules/'+ things[windowId].module+'.html',
      'scrolling': 'no'
    });
    
    $(this).find('.window').append($iframe);

    // set text for this section's window
    $(this).find('.label').text( things[labelId].label);

  });
});
Rerun