я вижу это все в одном коде.
то есть окна для команд: на подкладке инфа (ну о командах факты и тд), за подкладкой (при наведении или клике) открывается список заданий по ступеням-уровням.
либо сделать уровней 6-8 с более сложными заданиями к концу.
либо написать, что уровни будут пополняться.
либо сделать линзы как другую систему для тех, кто пройдет эту.

Код:
<!--HTML-->

<center>
а ты любишь лайки? вполне возможно, что ты не фанатик подобного, но ведь их приятно получать, разве нет? попробуй, могу гарантировать, что тебе понравится. к тому же, нет ничего проще. а я тем временем с удовольствием объясню тебе работу этого механизма. начнем с того, что тебе надо определиться с командой. первый шаг всегда простой, но даю слово, дальше никто не попросит решать математические задачи. ведь на самом деле тебе надо будет просто выполнять задания - очень важно выполнить все задания каждой ступени, ведь только тогда ты сможешь получить лайки -, которые в последствии помогут набрать количество лайков и перейти на следующую ступень. если тебе будет проще, то я назову все это валютой. разница лишь в том, что за лайки тебе будут доступны интересные услуги, когда с каждой новой пройденной ступенью ты сможешь получать вип-услугу. ну что, готов рискнуть и попробовать стать местной знаменитостью? надеюсь, что да. ведь я люблю следить за твоими успехами.
<hr>
▲  лайки получаете после выполнения всех заданий: <b> не цитируйте 1 задание</b>: выполнили все » предоставили доказательства » получили лайки ♥<br>
<center><a onclick="obj=document.getElementById('cont_1').style; tmp=(obj.display!='block') ? 'block' : 'none'; obj.display=tmp; return false;"><button><b>ШАБЛОН<br></b></button></a> 
<div id="cont_1" style="display: none;"> 
<center><b>задание</b> » доказательство [ссылка или цитата]</center>
</div></center>
<div style="font-family: verdana; font-size: 14px; align: center; color: black; text-transform: uppercase; background-color: #729C03;"><center><b>INSTAGRAM;</b></center></div>
<table><tr><td>
<div style="background: rgba(196, 212, 57, 0.64); padding:0.5px; font-family:courier new; text-align: center; color:black; font-size:14px; text-transform:uppercase; letter-spacing:9px; border-radius: 20px;"><b>факты:</b></div></td>
<td><div style="background: rgba(196, 212, 57, 0.64); padding:0.5px; font-family:courier new; text-align: center;color:black; font-size:14px; text-transform:uppercase; letter-spacing:9px; border-radius: 20px;"><b>характеристика:</b></div></td></tr>
<tr>
<td>
► в душе хочет стать знаменитостью;<br>
► любит фотографировать;<br>
► ребенок полноценной семьи;<br>
► любимчик фортуны;<br>
► имеет неприятную тайну;<br>
</td><td>
► любовь к путешествиям;<br>
► азартность;<br>
► тщеславие;<br>
► мнительность;<br>
► ревность;<br></td></tr></table>

<div style="font-family: verdana; font-size: 14px; align: center; color: black; text-transform: uppercase; background-color: #729C03;"><center><b>TWITTER;</b></center></div>
<table><tr><td>
<div style="background: rgba(196, 212, 57, 0.64); padding:0.5px; font-family:courier new; text-align: center; color:black; font-size:14px; text-transform:uppercase; letter-spacing:9px; border-radius: 20px;"><b>факты:</b></div></td>
<td><div style="background: rgba(196, 212, 57, 0.64); padding:0.5px; font-family:courier new; text-align: center;color:black; font-size:14px; text-transform:uppercase; letter-spacing:9px; border-radius: 20px;"><b>характеристика:</b></div></td></tr>
<tr>
<td>
► ---<br>
► ---<br>
► ---<br>
► ---<br>
► ---<br>
</td><td>
► ---<br>
► ---<br>
► ---<br>
► ---<br>
► ---<br></td></tr></table>

<div style="font-family: verdana; font-size: 14px; align: center; color: black; text-transform: uppercase; background-color: #729C03;"><center><b>TUMBLR;</b></center></div>
<table><tr><td>
<div style="background: rgba(196, 212, 57, 0.64); padding:0.5px; font-family:courier new; text-align: center; color:black; font-size:14px; text-transform:uppercase; letter-spacing:9px; border-radius: 20px;"><b>факты:</b></div></td>
<td><div style="background: rgba(196, 212, 57, 0.64); padding:0.5px; font-family:courier new; text-align: center;color:black; font-size:14px; text-transform:uppercase; letter-spacing:9px; border-radius: 20px;"><b>характеристика:</b></div></td></tr>
<tr>
<td>
► ---<br>
► ---<br>
► ---<br>
► ---<br>
► ---<br>
</td><td>
► ---<br>
► ---<br>
► ---<br>
► ---<br>
► ---<br></td></tr></table>

<div style="font-family: verdana; font-size: 14px; align: center; color: black; text-transform: uppercase; background-color: #729C03;"><center><b>FACEBOOK;</b></center></div>
<table><tr><td>
<div style="background: rgba(196, 212, 57, 0.64); padding:0.5px; font-family:courier new; text-align: center; color:black; font-size:14px; text-transform:uppercase; letter-spacing:9px; border-radius: 20px;"><b>факты:</b></div></td>
<td><div style="background: rgba(196, 212, 57, 0.64); padding:0.5px; font-family:courier new; text-align: center;color:black; font-size:14px; text-transform:uppercase; letter-spacing:9px; border-radius: 20px;"><b>характеристика:</b></div></td></tr>
<tr>
<td>
► ---<br>
► ---<br>
► ---<br>
► ---<br>
► ---<br>
</td><td>
► ---<br>
► ---<br>
► ---<br>
► ---<br>
► ---<br></td></tr></table>