{% extends 'templatevamp.html' %}

{% block title %}Frequently Asked Questions{% endblock %}

{% block head %}
<style>
  #side-nav.affix {
    position: fixed;
    top: 20px;
    width: 21%;
    padding-right: 15px;
  }

  #side-nav>.active>a {
    font-weight: 700;
    background-color: transparent;
    border-right: 2px solid #337ab7;
  }

  #side-nav>li>a:hover {
    background-color: transparent;
    border-right: 1px solid #337ab7;
  }
</style>
{% endblock %}

{% block content %}
<div class="spacer" style="padding-top: 28px"></div>

<div class="main">
  <div class="main-inner">
    <div class="container">
      <div class="row">
        <nav class="col-md-3 scrollspy">
          <ul id="side-nav" class="nav hidden-xs hidden-sm" data-spy="affix"></ul><!-- end of main navigation -->
        </nav>

        <div class="col-md-9" id="api">
          <div class="widget">
            <div class="widget-header"><i class="fa fa-question-circle-o"></i>
              <h3>What is MementoDamage?</h3>
            </div>
            <div class="widget-content">
              <p>Memento Damage is a tool to calculate damage value of a memento (URI-M). However, this tool can also be used to calculate the damage on a live web page (URI-R). This is a project by <a href="http://ws-dl.blogspot.com/"> Web Science and Digital Libraries (WSDL) </a> Research Group, Old Dominion University</p>
            </div>
          </div>

          <div class="widget">
            <div class="widget-header"><i class="fa fa-question-circle-o"></i>
              <h3>Is it free to use?</h3>
            </div>
            <div class="widget-content">
              <p>Yes, it is free and open source. The source code is availabe on github: <a href="https://github.com/oduwsdl/web-memento-damage">https://github.com/oduwsdl/web-memento-damage</a></p>
            </div>
          </div>

          <div class="widget">
            <div class="widget-header"><i class="fa fa-question-circle-o"></i>
              <h3>How to use this tool?</h3>
            </div>
            <div class="widget-content">
              <p>Go see the <a href="/help">help</a> menu to find more detail about how to use this tool</p>
            </div>
          </div>

          <div class="widget">
            <div class="widget-header"><i class="fa fa-question-circle-o"></i>
              <h3>Why do I have to use this tool?</h3>
            </div>
            <div class="widget-content">
              <p>To measure how well your web page is archived</p>
            </div>
          </div>

          <div class="widget">
            <div class="widget-header"><i class="fa fa-question-circle-o"></i>
              <h3>How is the damage calculated?</h3>
            </div>
            <div class="widget-content">
              <p>It is calculated by identifying the missing resources (images, multimedia, css, and javascript) and then measuring the importance of those missing resources. Please refer to <a href="http://dl.acm.org/citation.cfm?id=2740826"> this paper </a> and <a href="https://link-springer-com.proxy.lib.odu.edu/article/10.1007%2Fs00799-015-0150-6"> this paper </a> for a deeper understanding about calculating memento damage.  </p>
            </div>
          </div>

          <div class="widget">
            <div class="widget-header"><i class="fa fa-question-circle-o"></i>
              <h3>What kind of resources that are measured in this tool?</h3>
            </div>
            <div class="widget-content">
              <p>We only consider the embedded resources</p>
            </div>
          </div>

          <div class="widget">
            <div class="widget-header"><i class="fa fa-question-circle-o"></i>
              <h3>I run an URI on memento-damage service, I got a number. What does this number mean?</h3>
            </div>
            <div class="widget-content">
              <p>The number that you got is the total damage value which are the ratio between actual damage and potential damage</p>
            </div>
          </div>

          <div class="widget">
            <div class="widget-header"><i class="fa fa-question-circle-o"></i>
              <h3>What is actual damage?</h3>
            </div>
            <div class="widget-content">
              <p>Actual damage is the damage value calculated based on the resources that are really misssing from in URI</p>
            </div>
          </div>

          <div class="widget">
            <div class="widget-header"><i class="fa fa-question-circle-o"></i>
              <h3>What is potential damage?</h3>
            </div>
            <div class="widget-content">
              <p>Potential damage is the damage that could happen if all resources are missing from in URI</p>
            </div>
          </div>

          <div class="widget">
            <div class="widget-header"><i class="fa fa-question-circle-o"></i>
              <h3>What is the input for this tool?</h3>
            </div>
            <div class="widget-content">
              <p>It works with both URI-R and URI-M</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block tail %}
<script type="text/javascript">
  $('.widget h3').each(function() {
    var text = $(this).html();
    var id = text.toLowerCase().replace(/[^\w\s]/gi, '').replace(/ /g,"-");

    $(this).attr('id', id)
    $('<li><a href="#' + id + '">' + text + '</a></li>').appendTo($('#side-nav'));
  });

  $('body')
    .attr('data-spy', 'scroll')
    .attr('data-target', '.scrollspy')
    .css('position', 'relative');

  $('#side-nav').affix({
    offset: {
      top: $('.navbar').offset().top + $('.spacer').offset().top
    }
  });
</script>
{% endblock %}
