<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);
});
});
External CSS
This Pen doesn't use any external CSS resources.