problems/infi.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4     <meta charset="UTF-8">
   5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
   7     <meta name="favicon" content="./favicon.ico">
   8
   9     <title>Infi.nl - Advent of Code</title>
  10
  11     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-12357372-4"></script>
  12     <script>
  13         window.dataLayer = window.dataLayer || [];
  14         function gtag() { dataLayer.push(arguments); }
  15         gtag('js', new Date());
  16         gtag('config', 'UA-12357372-4');
  17     </script>
  18
  19     <style>
  20         body {
  21             margin: 0;
  22             overflow: hidden;
  23         }
  24
  25         html,
  26         body,
  27         .wrapper {
  28             height: 100%;
  29         }
  30
  31         .wrapper {
  32             display: none;
  33             overflow-y: auto;
  34             padding: 0 50px;
  35             background-image: url(wallpaper.png);
  36             background-color: rgba(15, 15, 35, 0.7);
  37             background-repeat: no-repeat;
  38             background-size: cover;
  39             background-position: center;
  40             background-blend-mode: multiply;
  41         }
  42
  43         .wrapper.show {
  44             display: block;
  45         }
  46
  47         h1,
  48         p,
  49         li,
  50         a,
  51         input,
  52         label,
  53         pre,
  54         textarea {
  55             font-family: Consolas, 'Courier New', "Lucida Console", Courier, Monaco, monospace, sans-serif;
  56         }
  57
  58         p,
  59         a,
  60         pre,
  61         input,
  62         textarea {
  63             font-size: 16px;
  64         }
  65
  66         h1,
  67         p,
  68         li,
  69         label {
  70             color: #fefefe;
  71         }
  72
  73         a {
  74             color: #ff6e00;
  75         }
  76
  77         h1 {
  78             font-size: 21px;
  79         }
  80
  81         pre {
  82             color: #1a1a1a;
  83             font-weight: 600;
  84             display: inline-block;
  85             margin: 0;
  86             padding: 10px;
  87             background-color: rgba(212, 212, 212, 0.8);
  88             border-radius: 10px;
  89         }
  90
  91         textarea {
  92             padding: 20px;
  93         }
  94
  95         img {
  96             width: 300px;
  97             margin-top: 20px;
  98             margin-bottom: 40px;
  99         }
 100
 101         form {
 102             margin-top: 20px;
 103         }
 104
 105         form#solutionFormA,
 106         form#solutionFormB,
 107         form#resultForm {
 108             display: flex;
 109         }
 110
 111         form#resultForm {
 112             flex-flow: column nowrap;
 113             max-width: 600px;
 114         }
 115
 116         form#resultForm > div {
 117             display: flex;
 118             margin-bottom: 20px;
 119         }
 120
 121         form#resultForm input {
 122             flex: 1;
 123         }
 124
 125         form#resultForm label {
 126             flex: 0 0 200px;
 127             align-self: center;
 128         }
 129
 130         label {
 131             color: #ff6e00;
 132         }
 133
 134         input {
 135             border: 0;
 136             padding: 10px 20px;
 137         }
 138
 139         input[type="submit"] {
 140             border-radius: 0;
 141             background: #ff6e00;
 142         }
 143
 144         .footer {
 145             margin-top: 20px;
 146             max-width: 600px;
 147             display: flex;
 148             justify-content: space-between;
 149         }
 150
 151         @media(min-width: 500px) {
 152             h1 {
 153                 font-size: 28px;
 154             }
 155
 156             p,
 157             a,
 158             li,
 159             input {
 160                 font-size: 21px;
 161             }
 162
 163             ul,
 164             ol {
 165                 padding-left: 60px;
 166             }
 167         }
 168
 169         @media(max-width: 700px) {
 170             .wrapper {
 171                 padding: 0 20px;
 172             }
 173
 174             .footer {
 175                 flex-flow: column nowrap;
 176             }
 177
 178             li {
 179                 font-size: 14px;
 180             }
 181
 182             pre {
 183                 font-size: 10px;
 184             }
 185         }
 186     </style>
 187 </head>
 188
 189 <body>
 190
 191     <div id="partOne" class="wrapper">
 192         <a href="https://infi.nl">
 193             <img src="logo.png" alt="Het logo van Infi">
 194         </a>
 195
 196         <h1>Welkom bij de Advent of Code puzzel van Infi!</h1>
 197
 198         <p>
 199             Robots will eat your job!
 200         </p>
 201         <p>
 202             Bij Infi houden wij niet van repetitief werk en dus proberen we dit jaar wat tijdrovende taken te automatiseren. Voor het uitdelen van de kerstcadeaus hebben wij daarom bezorgrobots gebouwd, zodat wij ons volledig kunnen richten op code committen en kerstborrels bezoeken.
 203         </p>
 204         <p>
 205             Helaas zitten we pas op release 0.9, want we kwamen er achter dat soms meerdere robots op dezelfde plek uit kunnen komen en dat is natuurlijk niet efficiënt. We moeten dit snel oplossen door te bepalen hoe vaak deze situatie voorkomt, want het is al bijna de 25ste! Help jij mee?
 206         </p>
 207         <p>
 208             Om te helpen met debuggen hebben we enkele logs beschikbaar gemaakt. Deze zijn in het volgende formaat opgeslagen:
 209         </p>
 210         <pre>[sx1,sy1][sx2,sy2](x1,y1)(x2,y2)(x1,y1)</pre>
 211         <p>
 212             Eerst vind je tussen de blokhaken de startposities van de robots. Let op: schaalbaarheid is belangrijk, dus het aantal robots is variabel! Vervolgens bevat het log de bewegingen die door de robots uitgevoerd zijn, in dezelfde volgorde als dat de robots zijn gedefinieerd.
 213         </p>
 214
 215         <p>Voorbeeld:</p>
 216         <pre>[0,0][1,1](1,0)(0,-1)(0,1)(-1,0)(-1,0)(0,1)(0,-1)(1,0)</pre>
 217         <ol>
 218             <li>Robot 1 begint op 0,0 en Robot 2 begint op 1,1</li>
 219             <li>Robot 1 gaat naar 1,0 (0,0 + 1,0)</li>
 220             <li>Robot 2 gaat naar 1,0 (1,1 + 0,-1)</li>
 221             <li>Twee robots op dezelfde plek. Dat is niet goed.</li>
 222             <li>Robot 1 gaat naar 1,1 (1,0 + 0,1)</li>
 223             <li>Robot 2 gaat naar 0,0 (1,0 + -1,0)</li>
 224             <li>Robot 1 gaat naar 0,1 (1,1 + -1,0)</li>
 225             <li>Robot 2 gaat naar 0,1 (0,0 + 0,1)</li>
 226             <li>Weer twee robots op dezelfde plek.</li>
 227             <li>Robot 1 gaat naar 0,0 (0,1 + 0,-1)</li>
 228             <li>Robot 2 gaat naar 1,1 (0,1 + 1,0)</li>
 229         </ol>
 230
 231         <p>
 232             Kun jij uitrekenen hoe vaak alle robots tegelijk op dezelfde plek uitkomen voor het volgende logbestand?
 233         </p>
 234
 235         <a id="uidLink" target="_blank">Klik hier om de log te bekijken</a>
 236
 237         <form id="solutionFormA">
 238             <input type="number" name="inputSolutionA" id="inputSolutionA">
 239             <input type="submit" value="Stuur je antwoord op">
 240         </form>
 241
 242         <div class="footer">
 243             <a href="http://werkenbij.infi.nl">Kom bij ons werken!</a>
 244             <a href="http://infi.nl">Bezoek onze coole website</a>
 245         </div>
 246     </div>
 247
 248     <div id="partTwo" class="wrapper">
 249         <a href="https://infi.nl">
 250             <img src="logo.png" alt="Het logo van Infi">
 251         </a>
 252
 253         <h1>Breaking news: we zien een patroon!</h1>
 254
 255         <p>
 256             Dit is heel gek: tijdens het doorspitten van de logs ontdekten we een vreemd patroon in de bewegingen van de robots. Het lijkt erop dat de robots slimmer zijn dan we dachten en dat ze tijdens hun werkzaamheden een patroon hebben gemaakt dat ons niet eerder was opgevallen. This could be the AI we’ve been looking for: kun jij het geheime bericht vinden?
 257         </p>
 258
 259         <a id="uidLink" target="_blank">Klik hier om de log te bekijken</a>
 260
 261         <form id="solutionFormB">
 262             <input type="number" name="inputSolutionB" id="inputSolutionB">
 263             <input type="submit" value="Stuur je antwoord op">
 264         </form>
 265
 266         <div class="footer">
 267             <a href="http://werkenbij.infi.nl">Kom bij ons werken!</a>
 268             <a href="http://infi.nl">Bezoek onze coole website</a>
 269         </div>
 270     </div>
 271
 272     <div id="result" class="wrapper">
 273         <a href="https://infi.nl">
 274             <img src="logo.png" alt="Het logo van Infi">
 275         </a>
 276
 277         <h1>Eureka!</h1>
 278
 279         <p>
 280             Met jouw hulp hebben we onze robots kunnen optimaliseren! Als je het onderstaande formulier invult en je bij de eerste 5 zit, dan belonen wij jou met een cool t-shirt!
 281         </p>
 282
 283         <a href="https://goo.gl/forms/dBnQx5pD5iQMLm9D2">Klik hier om ons jouw oplossing te sturen</a>
 284
 285         <div class="footer">
 286             <a href="http://werkenbij.infi.nl">Kom bij ons werken!</a>
 287             <a href="http://infi.nl">Bezoek onze coole website</a>
 288         </div>
 289     </div>
 290
 291     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 292     <script src="script.js"></script>
 293
 294     <!--
 295
 296     powered by
 297                                         ///////////   /////
 298                                         ////////////.  //////
 299                                         /////            //*
 300                                         /////
 301     /////     *///////////////,      /////////////////////
 302     /////    ///////////////////     /////////////////////
 303     /////   //////         //////    /////           /////
 304     /////   /////           /////    /////           /////
 305     /////   /////           /////    /////           /////
 306     /////   /////           /////    /////           /////
 307     /////   /////           /////    /////           /////
 308     /////   /////           /////    /////           /////
 309     ///     ///             ///      ///             ///
 310
 311     https://infi.nl
 312
 313     -->
 314
 315 </body>
 316 </html>