topic07.html

---
next_text: Applying an XSLT
next_id: topic08
---

<h3>Interacting with editorial choices</h3>

<p>
    With Verovio it is possible to interactively switch between different editorial choices in the MEI file. In this example, the MEI file contains several <code>orig</code>, <code>reg</code> and <code>unclear</code> elements that indicate choices in the encoded outline. These choices are indicated on the score by coloured highlights, and clicking on these highlights offers the ability to choose a different rendering.
</p>

{% highlight javascript %}
function loadPage() {
    ////////////////////////////////////////////////////
    /* Reload the page with the choice if we made one */
    ////////////////////////////////////////////////////
    if (choiceId != "") {
        var elementPage = vrvToolkit.getPageWithElement(choiceId);
        if (elementPage == 0) console.log("ID not found");
        else page = elementPage;
        choiceId = "";
    }
    
    svg = vrvToolkit.renderPage(page, {});
    $("#choice_overlay").hide();
    $("#svg_output").html(svg);
    
    /////////////////////////////////////////////////////
    /* Highlights the orign in blue and the reg in red */
    /////////////////////////////////////////////////////
    $(".orig, .unclear").attr("fill", "#00e").attr("stroke", "#00e");
    $(".reg").attr("fill", "#d00").attr("stroke", "#d00");
    
    ///////////////////////////////////////////////
    /* Bind a click event on all choice children */
    ///////////////////////////////////////////////
    $(".orig, .reg, .unclear").each(function() {
        ///////////////////////////////////////////////////////////
        /* Make the bounding box clickable (works on Opera only )*/
        ///////////////////////////////////////////////////////////
        $(this).attr("pointer-events", "bounding-box");
        $(this).click(function(event) {
            /////////////////////////////////////////////////////////////////////////////
            /* Create a link for each alternative sibling of the selected choice child */
            /////////////////////////////////////////////////////////////////////////////
            links = "";
            $(this).siblings().each(function() {
                /////////////////////////////////////////////////////////////////
                /* Display the @label for the link but it can be anything else */
                /////////////////////////////////////////////////////////////////
                var attr = vrvToolkit.getElementAttr($(this).attr("id"));
                if (attr.label) {
                    links += '<p><a href="javascript:choose(\'' + $(this).parent().attr("id") + '\', \'' + $(this).attr("id") + '\')">' + attr.label + "</a></p>";
                }
            });
            //////////////////////
            /* Show the overlay */
            //////////////////////
            $("#choice_overlay").html(links);
            $("#choice_overlay").attr("style", "left: " + event.pageX + "px;" + "top: " + event.pageY + "px;").show();
        });
    });
};
{% endhighlight %}

<p>
   Choosing an option is handled by the 'choose' function, which will use Verovio's XPath features to select one notation choice and render it.
</p>

{% highlight javascript %}
////////////////////////////////////////////
/* A function for choosing a choice child */
////////////////////////////////////////////
function choose(choice, child) {
    //////////////////////////////////////////////////////
    /* Keep track of the selected child for each choice */
    //////////////////////////////////////////////////////
    choices[choice] = child;
    choiceXPathQuery = [];
    //////////////////////////////////////
    /* Make each of them an xpath query */
    //////////////////////////////////////
    for (key in choices) {
        choiceXPathQuery.push("./*[@xml:id='" + choices[key] + "']")
    }
    choiceId = choice;
    loadFile();
}
{% endhighlight %}

{% include html-tutorial.html id="code1" file="topic07-choice.html" %}
<div id="code1-xml" style="display: none">
{% highlight html %}
{% include_relative gh-tutorial/topic07-choice.html %}
{% endhighlight %}
</div>

<div class="pull-right">
    <p><a href="./tutorial.xhtml?id={{ page.next_id }}">{{ page.next_text }}</a> →</p>
</div>