template.html

<script src="/static/js/vendor/jquery.serializeJSON.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<!-- Start of messages -->
<div style="margin-top:15px;">
    <div id="success" class="alert alert-success" style="display:none;">
        <strong>Well done!</strong> You have successfully submitted your transcription. Here is another to try if you
        wish!
    </div>
    <div id="loading" class="alert alert-info" style="display:none;">
        <img src="/static/img/loading.gif">Loading next task...
    </div>
    <div id="taskcompleted" class="alert alert-info" style="display:none;">
        <strong>The task has been completed!</strong> Thanks a lot!
    </div>
    <div id="finish" class="alert alert-success" style="display:none;">
        <h2>Congratulations!</h2>
        <p>
            You have participated in all available tasks!
        </p>
        <img src="/static/img/MP_SQUARE_notype.png"
             height="200" width="200" alt="The MicroPasts Square Logo"/>
        <div class="alert-actions">
            <a class="btn-default btn" href="/">Go back to the home page</a>
            <a class="btn-default btn" href="/app">or, have a look at our
                other applications</a>
        </div>
    </div>
    <div id="error" class="alert alert-error" style="display:none;">
        <a class="close">×</a>
        <strong>Error!</strong> Something went wrong, please contact the site administrators
    </div>
</div>
<!-- End Success and Error Messages for the user -->


<!--
    Task DOM for loading the S3 Images
    It uses the class="skeleton" to identify the elements that belong to the
    task.
-->
<div class="row skeleton">
    <!-- Button row -->
    <div class="row">
        <div class="btn-group">
            <button class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal"><i
                    class="glyphicon glyphicon-eye-open"></i> Tutorial
            </button>
            <a class="btn btn-info btn-xs" id="support" target="_blank" data-toggle="tooltip" data-placement="top"
               title="Opens in a new window" href="http://community.micropasts.org/category/crowd-sourcing-support"><i
                    class="glyphicon glyphicon-book"></i> Community Help</a>
        </div>
    </div>
    <!-- End of button row -->

    <!-- The transcribe section using html table -->
    <div class="row" id="crowdmatchCoin">

        <h4>Can you assign this coin to an RIC number?</h4>

        <div class="row">
            <div class="pasCoin">
                <div class="col-md-6">
                    <ul id="details"></ul>
                </div>
                <div class="col-md-6">
                    <img id="pasImage" width="300" src="" class="text-center" style="max-height:300; max-width:300;"/>
                </div>
            </div>
        </div>
        <div class="row" style="min-height:400px;">
            <div class="ocreMatches col-md-12">
                <h2>Possible matches</h2>
                <div class="row">
                    <div class="form-group" id="radios">
                    </div>
                </div>

                <div class="row">
                    <div id="metaCoins">

                    </div>
                </div>

                <div class="row">
                    <div id="matches">

                    </div>
                </div>


            </div>
        </div>
        <div class="row">
            <p>
                <label for="certainty">How certain are you?:</label>
                <input type="text" id="certainty" readonly style="border:0; color:#f6931f; font-weight:bold;">
            </p>
            <div id="slider"></div>

            <div class="checkbox">
                <label><input type="checkbox" id="revise">PAS record needs revising</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" id="unattributable">Cannot be attributed reliably</label>
            </div>
            <div class="comments">
                <div class="form-group">
                    <label class="control-label" for="comments">Transcriber's Comments</label>
                    <textarea class="form-control" rows="5" id="comments" name="comments"
                              placeholder="Add any comments you have"></textarea>
                </div>
            </div>
        </div>

        <button class="btn btn-success btn-answer" value='Yes'>Submit your answer</button>

        <!-- Feedback items for the user -->
        <p>You are working now on task: <span id="task-id" class="label label-warning">#</span></p>
        <p>You have completed: <span id="done" class="label label-info"></span> tasks from
            <!-- Progress bar for the user -->
            <span id="total" class="label label-inverse"></span></p>
        <div class="progress progress-striped">
            <div id="progress" rel="tooltip" title="#" class="progress-bar" role="progressbar" style="width: 0%;"></div>
        </div>
        <!-- End of feedback row -->

    </div>
    <!-- End of the transcribe section -->
</div>
<!-- End of DOM Skeleton row -->


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal header -->
            <div class="modal-header">
                <h3>Roman Imperial Coinage concordance</h3>
            </div>

            <!-- Step 1 of the tutorial -->
            <div id="0" class="modal-body" style="display:none">
                <p>
                    This application is on behalf of <a href="https://finds.org.uk" target="_blank">the Portable
                    Antiquities Scheme</a>
                    and <a href="http://britishmuseum.org" target="_blank">the British Museum</a>, in conjunction with
                    the
                    <a href="http://numismatics.org" target="_blank">American Numismatics Society</a>.
                </p>
                <p>
                    Within this project, we would like your help to assist with computational, automatic assignment of a
                    numismatic numbering system (Roman Imperial Coinage) to Portable Antiquities Scheme (PAS) data. The
                    PAS database was built by the MicroPasts' project co-Investigator, Daniel Pett, and contains details
                    for
                    hundreds of thousands of Roman Imperial coins found by the public in England and Wales.
                </p>
                <p>
                    Collaborating with Ethan Gruber, from the ANS, a script has been written to try and match PAS coins
                    to the RIC numbering system. However, fuzzy matches are produced and ths is what we need help with
                    fixing.
                </p>
            </div>

            <!-- Step 2 of the tutorial -->
            <div id="1" class="modal-body" style="display:none">
                <p>
                    So what would we like you to do?
                </p>

                <p>
                    Each coin within this project can have up to 4 potential matches within the numbering system as
                    shown
                    in the example below:
                </p>
                <img src="https://micropasts-other.s3.amazonaws.com/other/matches.png" width="100%"/>
                <p>
                    We would like you to review the PAS recorded data and the ANS data derived through computational
                    methods from
                    the ANS' <a href="" target="_blank">Online Coins of the Roman Empire</a> (OCRE) project.
                </p>
            </div>

            <!-- Step 2 of the tutorial -->
            <div id="2" class="modal-body" style="display:none">
                <p>
                    Each record will be shown with up to 4 matches with the numbering format in this style:
                </p>
                <blockquote>
                    <p>
                        ric.1(2).tib.26
                    </p>
                </blockquote>
                <p>
                    Which means for example:
                </p>
                <ul>
                    <li>Roman Imperial Coinage volume 1</li>
                    <li>Second Edition</li>
                    <li>Emperor Tiberius</li>
                    <li>Number 26</li>
                </ul>
                <p>
                    We would then like you to review and compare the metadata and example images for each matched type
                    to the PAS data using the image carousel below the text (see below).
                </p>
                <img src="https://micropasts-other.s3.amazonaws.com/other/carousel.png" height="300px"/>

            </div>

            <!-- Step 2 of the tutorial -->
            <div id="3" class="modal-body" style="display:none">

                <p>
                    If you feel you can choose a match, click a radio button. Then decide how certain you are
                    with your ID by using the slider as shown below (0 = uncertain, 5 = maybe, 10 = extremely certain).
                </p>
                <img src="https://micropasts-other.s3.amazonaws.com/other/certainty.png" width="100%"/>
                <p>
                    You then have the chance to tell us more! Firstly you can check the box to tell us that the PAS
                    record needs revising and secondly whether you think that the coin cannot be attributed easily.
                </p>
                <p>
                    If you would like to tell us more about the record, or suggest improvements, you could fill in the
                    comments box.
                </p>
            </div>
            <!-- End of stepped modal body -->

            <!-- Modal footer -->
            <div class="modal-footer">
                <a id="prevBtn" href="#" onclick="showStep('prev')" class="btn btn-default">Previous</a>
                <a id="nextBtn" href="#" onclick="showStep('next')" class="btn btn-success">Next</a>
                <button id="startContrib" data-dismiss="modal" class="btn btn-primary" style="display:none"/>
                </a>
                <i class="glyphicon glyphicon-thumbs-up"></i> Let's start!</a>
            </div>
        </div>
    </div>
</div>

<!-- Client side scripts -->
<script>
// Quick fix for IE8
Modernizr.load({
  test: window.JSON,
  nope: '/static/js/vendor/json2.min.js'
});


</script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css"
      type="text/css">
<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/jquery.flexslider-min.js"></script>
<!-- Step through modals -->
<script type="text/javascript">
    var step = -1;
    function showStep(action) {
        $("#" + step).hide();
        if (action == 'next') {
            step = step + 1;
        }
        if (action == 'prev') {
            step = step - 1;
        }
        if (step == 0) {
            $("#prevBtn").hide();
        }
        else {
            $("#prevBtn").show();
        }
        if (step == 3) {
            $("#nextBtn").hide();
            $("#startContrib").show();
        }
        $("#" + step).show();
    }
    showStep('next');
    $("#modal").modal('show');


</script>

<!-- Pyboss scripts -->
<script>
    function loadUserProgress() {
        pybossa.userProgress('ricConcordance').done(function(data){
            console.log("Total answers done for user: " + data.done);
            var pct = Math.round((data.done*100)/data.total);
            $("#progress").css("width", pct.toString() +"%");
            $("#progress").attr("title", pct.toString() + "% completed!");
            $("#progress").tooltip({'placement': 'left'});
            $("#total").text(data.total);
            $("#done").text(data.done);
            $('a[rel]').tooltip({'placement': 'left'});
        });
    }
    pybossa.taskLoaded(function(task, deferred) {
        if ( ! $.isEmptyObject(task) ) {
            loadUserProgress();
            console.log("User progress");
            deferred.resolve(task);
        } else {
            deferred.resolve(task);
        }
    });
      $(window).resize(function(){
        console.log('Window resized');
      });
    pybossa.presentTask(function(task, deferred) {
        if ( !$.isEmptyObject(task) ) {
        console.log(task);
        $.ajax({
        url: task.info.object + '/format/json',
        dataType: 'json',
        success: function(data){

            var numismatic = {};

            numismatic['Record ID'] = data[1][0].old_findID;

            if(data[1][0].obverseInscription != null) {
                numismatic['Obverse inscription'] = data[1][0].obverseInscription;
            }

            if(data[1][0].obverseDescription != null) {
                numismatic['Obverse description'] = data[1][0].obverseDescription;
            }

            if(data[1][0].reverseInscription != null) {
                numismatic['Reverse inscription'] = data[1][0].reverseInscription;
            }

            if(data[1][0].reverseDescription != null) {
                numismatic['Reverse description'] = data[1][0].reverseDescription;
            }

            if(data[1][0].mintName != null) {
                numismatic['Mint'] = data[1][0].mintName;
            }

            if(data[1][0].primaryRuler != null) {
                numismatic['Issuer'] = data[1][0].primaryRuler;
            }
            if(data[1][0].denomination != null) {
                numismatic['Denomination'] = data[1][0].denomination;
            }
            if(data[1][0].description != null) {
                numismatic['Description'] = data[1][0].description.replace(/<(?:.|\n)*?>/gm, '');;
            }

            if(data[1][0].ricID != null) {
                numismatic['Current RIC ID'] = data[1][0].ricID;
            }

            if(data[1][0].filename != null) {
                var filename = data[1][0].filename;
                var imageDir = data[1][0].imagedir;
                var root = 'https://finds.org.uk/';
                $("#pasImage").attr("src", root + imageDir + filename);
            }

            $.each(numismatic, function(key, value) {
                var html = "<li>" + key + " : " + value + "</li>";
                $('#details').append(html);
            });

        },
        error: function() {
            console.log("error with call");
        }
    });
      var ids = [];

      ids.push(task.info.match1);
      if(task.info.match2 != null) {
        ids.push(task.info.match2);
      }
      if(task.info.match3 != null) {
        ids.push(task.info.match3);
      }
      if(task.info.match4 != null) {
        ids.push(task.info.match4);
      }
      //console.log(ids);
        var nomismaUrl = "http://nomisma.org/apis/numishareResults?identifiers=";
        var baseUri = "&baseUri=http://numismatics.org/ocre/id/";
        var identifiers = ids.join("|");
        var apiCall = nomismaUrl + identifiers + baseUri + "&format=json";
        //console.log(apiCall);
        $.ajax({
                type: "get",
                url: apiCall,
                dataType: "json",
                success: function(data) {
                    //console.log(data);
                    var matches = [];
                    matches.push(data.types[0]);
                    if(data.types[1].id !== '') {
                        matches.push(data.types[1]);
                    }
                    if(data.types[2].id !== '') {
                        matches.push(data.types[2]);
                    }
                    if(data.types[3].id !== '') {
                        matches.push(data.types[3]);
                    }
                    var a = 1;
                    $.each(matches, function(index, item){
                        var identClass = item.id;
                        identClass = identClass.replace(/"/g, "").replace(/'/g, "").replace(/\(|\)/g, "").replace(/\./g,"");
                        var radios = '';
                        radios += '<div class="col-md-3" id="nomisma' + identClass + '"><label class="radio-inline">';
                        radios += '<input type="radio" id="possibleRicID" name="possibleRicID" value="' + item.id + '">';
                        radios += item.id + '</label></div>';
                        $('#radios').append(radios);
                        var html ='';

                        $.ajax({
                        crossOrigin: true,
                        type: "get",
                        url: 'https://query.yahooapis.com/v1/public/yql?q=select%20descMeta%20from%20xml%20where%20url%3D"http%3A%2F%2Fnumismatics.org%2Focre%2Fid%2F' + item.id + '.xml"&format=json',
                        dataType: "json",
                        success: function(data) {
                            var nuds = {};
                            nuds['Title'] = data.query.results.nuds.descMeta.title.content;
                            nuds['Authority'] = data.query.results.nuds.descMeta.typeDesc.authority.persname.content;
                            nuds['Mint'] = data.query.results.nuds.descMeta.typeDesc.geographic.geogname[0].content;
                            nuds['Denomination'] = data.query.results.nuds.descMeta.typeDesc.denomination.content;
                            nuds['Material'] = data.query.results.nuds.descMeta.typeDesc.material.content;
                            nuds['Obverse Legend'] = data.query.results.nuds.descMeta.typeDesc.obverse.legend.content;
                            nuds['Reverse Legend'] = data.query.results.nuds.descMeta.typeDesc.reverse.legend.content;
                            nuds['Obverse Description'] = data.query.results.nuds.descMeta.typeDesc.obverse.type.description.content;
                            nuds['Reverse Description'] = data.query.results.nuds.descMeta.typeDesc.reverse.type.description.content;
                            nuds['Date from'] = data.query.results.nuds.descMeta.typeDesc.dateRange.fromDate.content;
                            nuds['Date to'] = data.query.results.nuds.descMeta.typeDesc.dateRange.toDate.content;

                            var nudsHtml = '<div>';
                            nudsHtml += '<ul id="' + identClass + '">';
                            nudsHtml += '</ul></div>';
                            $('#nomisma' + identClass).append(nudsHtml);
                            $.each(nuds, function(key, value) {
                                var coins = "<li>" + key + " : " + value + "</li>";
                                $('#' + identClass).append(coins);
                            });
                        },
                        error: function() {
                            console.log("error with call");
                        }
                        });

                        //console.log(item.objects);
                        if(item['object-count'] > 0) {
                        html += '<div class="col-md-3">';
                        html += '<h2 class="lead text-center">' + item.id + ' examples</h2>';
                        html += '<div class="flexslider">';
                        html += '<ul class="slides">';
                        var objects = item.objects;
                        $.each(objects, function(index, object){
                         if(object.obvRef != null) {
                            html += '<li>';
                            html += '<img src="' + object.obvThumb + '" width="50"/><img src="' + object.revThumb + '" width="50"/>';
                            //html += '<p class="flex-caption">' + object.collection + ': ' + object.identifier +'</p>';
                            html += '</li>';
                            }
                        });
                        html += '</ul>';
                        html += '</div>';
                        html += '</div>';
                        $('#matches').append(html);
                        }
                        $('.flexslider').flexslider({
                          animation: "slide",
                          animationLoop: false,
                          slideshow: false,
                          touch: true,
                          maxItems: 3,
                          minItems: 1,
                        });

                    });
                },
                error: function(xhr, status) {
                    console.log("error with call");
                }
            });
        $(function() {
                        $( "#slider" ).slider({
                          orientation: "horizontal",
                          range: "min",
                          min: 1,
                          max: 10,
                          value: 5,
                          slide: function( event, ui ) {
                            $( "#certainty" ).val( ui.value );
                          }
                        });
                        $( "#certainty" ).val( $( "#slider" ).slider( "value" ) );
                        });
        $("#question").html(task.info.question);
        $('#task-id').html(task.id);
        $('#support').tooltip({'placement': 'top'});

        $('.btn-answer').off('click').on('click', function(evt) {
            evt.preventDefault();
            var answer = $(evt.target).attr("value");
            if (typeof answer != 'undefined') {
                task.answer = $("#crowdmatchCoin").serializeJSON();

                task.answer.possibleRicID = $('input[name=possibleRicID]:checked', '#crowdmatchCoin').val();
                task.answer.comments = $("#comments").val();
                task.answer.revisePas = $("#revise").is(':checked') ? 1 : 0;
                task.answer.unattributable = $("#unattributable").is(':checked') ? 1 : 0;
                task.answer.certainty = $("#certainty").val();
                console.log(task.answer);
                pybossa.saveTask(task.id, task.answer).done(function() {
                    $("html, body").animate({ scrollTop: 0 }, "slow");
                    $("#success").fadeIn(500).fadeOut(500);
                    $("#loading").fadeIn(500).fadeOut(500);
                    $('#comments').val('');
                    $('input:checkbox').removeAttr('checked');
                    $("#possibleRicID").val('');
                    $("#certainty").val('');
                    $("#radios").empty();
                    $("#matches").empty();
                    $("#pasImage").empty();
                    $("#details").empty();
                    $("#metaCoins").empty();
                    deferred.resolve();
                });
            } else {
                $("#error").show();
            }
        });
            $("#loading").hide();
        } else {
            $(".skeleton").hide();
            $("#loading").hide();
            $("#finish").fadeIn(500);
        }
    });
    pybossa.run('ricConcordance');


</script>
<style>
    .flex-caption {
    width: 96%;
    padding: 2%;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.3);
    font-size: 14px;
    line-height: 18px;
    }

    .flexslider {
    max-width: 100%;
    max-height: 400px;
    }

    .flexslider .slides img {
    max-width: 100px;
    max-height: 200px;
    width: 100px;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    #metaCoins {
    margin-top: 20px;
    }
    .radio-inline {
    padding-left: 40 px;
    margin-bottom: 20px;
    }
    #crowdmatchCoin li {
    list-style: none;
    }
    .row {
    margin-right: 0px;
    margin-left: 0px;
    }
</style>