GCHQ's crypto Christmas puzzle

by Andy Jones

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="gchq-container">
        <div class="row-header">
            <div class="row-blank"></div>
            <div class="cell-header cell-header-1">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div>7</div>
                <div>2</div>
                <div>1</div>
                <div>1</div>
                <div>7</div>
            </div>
            <div class="cell-header cell-header-2">
                <div></div>
                <div></div>
                <div></div>
                <div>1</div>
                <div>1</div>
                <div>2</div>
                <div>2</div>
                <div>1</div>
                <div>1</div>
            </div>
            <div class="cell-header cell-header-3">
                <div>1</div>
                <div>3</div>
                <div>1</div>
                <div>3</div>
                <div>1</div>
                <div>3</div>
                <div>1</div>
                <div>3</div>
                <div>1</div>
            </div>
            <div class="cell-header cell-header-4">
                <div></div>
                <div>1</div>
                <div>3</div>
                <div>1</div>
                <div>1</div>
                <div>5</div>
                <div>1</div>
                <div>3</div>
                <div>1</div>
            </div>
            <div class="cell-header cell-header-5">
                <div></div>
                <div>1</div>
                <div>3</div>
                <div>1</div>
                <div>1</div>
                <div>4</div>
                <div>1</div>
                <div>3</div>
                <div>1</div>
            </div>
            <div class="cell-header cell-header-6">
                <div></div>
                <div></div>
                <div></div>
               ...

CSS

.gchq-container {
        width: 850px;
        height: 850px;
    }

    .row {
        display: block;
        content: "";
        display: table;
        clear: both;
    }

    .active {
        background-color: black;
    }

    .gchq-container .row div {
        height: 25px;
        width: 25px;
        float: left;
        vertical-align: middle;
        outline: 1px solid black;
        cursor: pointer;
    }

    .gchq-container .row-header div {
        height: 225px;
        width: 25px;
        float: left;
        vertical-align: middle;
        outline: 1px solid black;
        cursor: pointer;
        outline: none;
    }

    .gchq-container .row div.cell-header {
        height: 25px;
        width: 225px;
        float: left;
        vertical-align: middle;
        outline: 1px solid black;
        cursor: pointer;
        outline: none;
    }

    .gchq-container .row div.cell-header div {
        width: 25px;
        height: 100%;
        float: right;
        cursor: pointer;
        text-align: center;
        vertical-align: middle;
        line-height: 25px;
        outline: none;
    }

    .gchq-container .row-header div.cell-header div {
        height: 25px;
        width: 100%;
        float: right;
        cursor: pointer;
        text-align: center;
        vertical-align: middle;
        line-height: 25px;
        outline: none;
    }

    .gchq-container .row-header div.row-blank {
        width: 225px;
        height: 225px;
        outline: none;
    }

JavaScript

$('body').on('click', '.cell', function() {
            $(this).toggleClass('active');
        });