jbidoret/gist:bbb86ebb3ab74ae0935811cfe7e49e0f

## gistfile1.txt
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>GAME</title>

    <style type="text/css">

    * { margin:0; padding: 0;}

    body {
        margin: 50px;
        overflow-x: hidden;
        font-family: "Times New Roman", serif;
        font-size: 36px;
        font-weight: bold;
        letter-spacing: -0.05em;
        text-transform: uppercase;
        font-style: italic;
    }

    a { color:black; text-decoration: none; }

    img,
    label,
    form,
    footer,
    p { display: block;  position: relative;}

    form, input, button {
        font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; font-style: inherit;
        background: none; border: none;
        padding: 0 .25em;
    }
    input { border: 3px solid;}
    div{ text-align: center; position: absolute; left: -100%; width: 400px; overflow: hidden; transition: all 300ms;}
    div.visible { left: 0; width: 100%;}
    div.visible ~ input,
    div.visible ~ button { visibility: hidden}

    /*  indice + solution */
    span { display: none;}
    .tip-visible span { display: inline;}

    </style>
    </head>


    <body>

        <article id="page">

            <label for="nom">Qui est–il ?</label>

            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Sergey_Brin_Ted_2010.jpg/220px-Sergey_Brin_Ted_2010.jpg" alt="" id="img"
                data-reponses="brin, sergey brin, sergei, sergey, serguey" >

            <form id="form">
                <p>
                    <div id="tryagain"></div>
                    <div id="win">WE HAVE A WINNER!</div>
                    <div id="gameover">GAME OVER: INSERT COIN &amp; TRY AGAIN</div>
                    <input type="text" id="nom" placeholder="Votre réponse…"></input>
                    <button type="submit">(vérifier)</button>
                </p>
            </form>

            <p>
                <a id="indice" href="#">Un indice ?</a>
                <span>Larry’s friend</span>
            </p>
            <p>
                <a id="solution" href="#">La solution ?</a>
                <span>Serguey Brin !</span>
            </p>
            <footer>
                <a id="accueil" href="icones.html">Abandonner…</a>
            </footer>

        </article>

        <script type="text/javascript">
            var input = document.querySelector('#nom'),
                form = document.querySelector('#form'),
                tryagain = document.querySelector('#tryagain'),
                win = document.querySelector('#win'),
                gameover = document.querySelector('#gameover'),
                indice = document.querySelector('#indice')
                solution = document.querySelector('#solution');

            // position aléatoire
            var els = document.querySelector("#page").children;
            for (var i = 0; i < els.length; i++) {
                els[i].style.left = parseInt(Math.random() * 50) + "%"
            }

            // indice / solution
            indice.addEventListener('click', function(e){
                e.preventDefault();
                this.parentNode.classList.add('tip-visible');
            })

            solution.addEventListener('click', function(e){
                e.preventDefault();
                this.parentNode.classList.add('tip-visible');
                setTimeout(function(){ document.location.href = "icones.html"}, 1500 );
            })


            // vérification des réponses

            // les différentes réponses possibles sont stockées dans l’attribut “data-reponses” du
            var reponses = document.querySelector('#img').dataset.reponses.replace(/ /g, "").toLowerCase().split(',');

            var essais = 0;

            form.addEventListener('submit', function(e){
                e.preventDefault();

                var valeur = input.value.replace(/ /g, "").toLowerCase();

                if( reponses.indexOf(valeur) > -1 ){
                    win.classList.add('visible');
                    setTimeout(function(){ document.location.href = "icones.html"}, 1500 );
                } else {
                    if(essais < 3){
                        tryagain.classList.add('visible');
                        tryagain.textContent = "Encore " + parseInt(3 - essais) + (' essai(s)…');
                        setTimeout(function(){ tryagain.classList.remove('visible')}, 1500 );
                    } else {
                        gameover.classList.add('visible');
                        setTimeout(function(){ document.location.href = "icones.html"}, 1500 );
                    }
                }

                essais++;
            })


        </script>

    </body>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>GAME</title>

	<style type="text/css">

	* { margin:0; padding: 0;}

	body {
	margin: 50px;
	overflow-x: hidden;
	font-family: "Times New Roman", serif;
	font-size: 36px;
	font-weight: bold;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	font-style: italic;
	}

	a { color:black; text-decoration: none; }

	img,
	label,
	form,
	footer,
	p { display: block; position: relative;}

	form, input, button {
	font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; font-style: inherit;
	background: none; border: none;
	padding: 0 .25em;
	}
	input { border: 3px solid;}
	div{ text-align: center; position: absolute; left: -100%; width: 400px; overflow: hidden; transition: all 300ms;}
	div.visible { left: 0; width: 100%;}
	div.visible ~ input,
	div.visible ~ button { visibility: hidden}

	/* indice + solution */
	span { display: none;}
	.tip-visible span { display: inline;}

	</style>
	</head>



	<body>

	<article id="page">

	<label for="nom">Qui est–il ?</label>

	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Sergey_Brin_Ted_2010.jpg/220px-Sergey_Brin_Ted_2010.jpg" alt="" id="img"
	data-reponses="brin, sergey brin, sergei, sergey, serguey" >

	<form id="form">
	<p>
	<div id="tryagain"></div>
	<div id="win">WE HAVE A WINNER!</div>
	<div id="gameover">GAME OVER: INSERT COIN & TRY AGAIN</div>
	<input type="text" id="nom" placeholder="Votre réponse…"></input>
	<button type="submit">(vérifier)</button>
	</p>
	</form>

	<p>
	<a id="indice" href="#">Un indice ?</a>
	<span>Larry’s friend</span>
	</p>
	<p>
	<a id="solution" href="#">La solution ?</a>
	<span>Serguey Brin !</span>
	</p>
	<footer>
	<a id="accueil" href="icones.html">Abandonner…</a>
	</footer>

	</article>

	<script type="text/javascript">
	var input = document.querySelector('#nom'),
	form = document.querySelector('#form'),
	tryagain = document.querySelector('#tryagain'),
	win = document.querySelector('#win'),
	gameover = document.querySelector('#gameover'),
	indice = document.querySelector('#indice')
	solution = document.querySelector('#solution');

	// position aléatoire
	var els = document.querySelector("#page").children;
	for (var i = 0; i < els.length; i++) {
	els[i].style.left = parseInt(Math.random() * 50) + "%"
	}

	// indice / solution
	indice.addEventListener('click', function(e){
	e.preventDefault();
	this.parentNode.classList.add('tip-visible');
	})

	solution.addEventListener('click', function(e){
	e.preventDefault();
	this.parentNode.classList.add('tip-visible');
	setTimeout(function(){ document.location.href = "icones.html"}, 1500 );
	})


	// vérification des réponses

	// les différentes réponses possibles sont stockées dans l’attribut “data-reponses” du
	var reponses = document.querySelector('#img').dataset.reponses.replace(/ /g, "").toLowerCase().split(',');

	var essais = 0;

	form.addEventListener('submit', function(e){
	e.preventDefault();

	var valeur = input.value.replace(/ /g, "").toLowerCase();

	if( reponses.indexOf(valeur) > -1 ){
	win.classList.add('visible');
	setTimeout(function(){ document.location.href = "icones.html"}, 1500 );
	} else {
	if(essais < 3){
	tryagain.classList.add('visible');
	tryagain.textContent = "Encore " + parseInt(3 - essais) + (' essai(s)…');
	setTimeout(function(){ tryagain.classList.remove('visible')}, 1500 );
	} else {
	gameover.classList.add('visible');
	setTimeout(function(){ document.location.href = "icones.html"}, 1500 );
	}
	}

	essais++;
	})


	</script>

	</body>