<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<style type="text/css">

    p {

        width: 100%;

        background-color: gray;

        color: white;

    }

    input[type="submit"] {

        margin-right: 20px;

    }

    form {

        text-align: right;

    }

    .container {

        text-align: left;

    }

    .highlight {

        font-weight: bold;

        background-color: yellow;

    }

    #note {

        height: 600px;

        overflow-y: scroll;

    }

</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">

    <h1>MIT MGH Data Extraction Platform</h1>

    <div class="row">

        <div class="col-md-9" id="note">

        </div>

        <div class="col-md-3">

            <b>Ejection Fraction:</b><br>

            <input type="text" name="line1" id="line1" placeholder="${guess}" />

        </div>

    </div>

</div>

<script type="text/javascript">

$(document).ready(function() {

    String.prototype.replaceAll = function(find, replace) {

        return this.replace(new RegExp(find, 'g'), replace); 

    };

    lt = String.fromCharCode(60);

    gt = String.fromCharCode(62);

    htmlString = "${image1}".replaceAll("<", lt).replaceAll(">", gt);

    html = $.parseHTML(htmlString);

    $("#note").append(html);

    $("#line1").focus();

});

</script>