Executable HTML

Executable HTML is a collection of custom HTML elements that offer document authors the ability to write and execute procedural logic in HTML5. We discuss the motivation of this approach


Replication of ambulatory assessment research is hard
Clinical psychology employs a class of research methods known as Ambulatory Assessment (AA) methods, which aim to capture bio-psycho-social processes in the context of daily life [1].These methods are nowadays mostly conducted via mobile devices such as smartphones and related peripherals.Respondents are sampled, sometimes multiple times per day, both for self-reports as responses to questionnaires (e.g. on feelings and thoughts), as well as for data streams from sensors on their devices (e.g., GPS locations, light intensity readings, count of steps taken, heart rate measurements).
In order to perform the data collection, researchers use software applications wherein they prepare the materials of the study (e.g., questions) and specify the manner in which these materials are to be presented to respondents, (e.g, branching the questionnaire based on given responses, or setting times at which responses should be given).The combination of the materials used for the collection of data, and the manner in which they are served to participant, which in the case of AA studies consist largely of procedural logic, form the protocol of the study [2].
An important problem facing AA studies, is that research protocols are hard to publish in detail and re-implement [3,4].In publications, researchers describe their protocols in natural language.Transcribing digital protocols into natural language in detail, and reconstructing them in software systems from natural language sources can be laborious and error-prone tasks.When describing computer programs, natural language can lead to ambiguities [5].This hurts the replicability of AA research.

A singular representation on a universal platform can help
The Web-browser is a ubiquitous platform with rich functionality.It provides fertile ground for the construction of Web

Table 1
Custom elements for procedural execution.

aa-session
Root container for content to be injected, and manager of the data collection session aa-sequence Instantiates its children one at a time, as members of an ordered sequence.Does so also in response to received signals for elements that have blocking behavior (e.g., waiting for a user to press a button).

aa-choose
Container of conditional statements.

aa-when
Instantiates its contents when its condition is met.
aa-otherwise Instantiates its contents when no conditions have been met.
aa-variable Sets a variable value explicitly.

aa-jump
Tells the sequence which of its immediate children to instantiate next.

Table 2
Custom elements for AA materials.

aa-text-answer
A textfield for free text input.

aa-multiple-choice
A group of choices presented as radio buttons, to choose a single one from.

aa-checkboxes
A group of choices presented as checkboxes, to choose many from.

aa-choice-item
A choice within either aa-multiple-choice or aa-checkboxes.

aa-likert-scale
Likert scale container, essentially a specific configuration of aa-multiple-choice.

aa-geolocation
Retrieves the user's GPS location.

aa-screen
Groups contents together and provides a single ''submit'' button for the user to signal that this particular request for data was completed.
applications or hybrid mobile apps (i.e., Web-apps that also invoke custom-made functionality in the native host platform) for researchers to conduct AA studies with.In previous work [6] we sought to take advantage of the potential to run AA studies either exclusively, or mainly in the browser, while allowing the composition of the protocol as a program.Results showed that the approach could suitably serve actual use cases for research [7], and gave rise to the question of whether the whole protocol could be represented as HTML.While it is generally straightforward to write the materials of an AA study in HTML, there is no support for procedural logic in HTML scripts.We contribute therefore a set of custom HTML elements that help treat parts of an HTML document as an executable program.Also, the provision of additional custom elements, for easier declaration of commonly used materials, helps raise the level of abstraction from the syntactic elements of the web-page, to the semantics of the AA study.The result is a formal, unambiguous representation of an AA protocol, in both its materials and procedures, that is human-readable and computer-executable, and serves as the single source for both the description and the implementation of an AA study, and which can be of use in the exact dissemination and replication of AA research protocols [8].

Software description
This software is a collection of custom HTML elements, which are made possible by Web Components [9], a set of technologies in the HTML5 specification.Web Components allow users to define their own HTML tags, which when parsed by the browser will be instantiated into the corresponding custom elements.A custom element's definition consists of HTML and CSS that the custom element encapsulates, and a set of callback functions in JavaScript for the browser to execute at different stages of the element's life-cycle, such as when it is appended to the document, or when one of its attributes is changed.
The present set of custom elements is written to achieve 3 objectives: • Ability to inject sub-trees of HTML nodes into the document after the document has been initially parsed.
A typical approach to presenting information partially or progressively is, after allowing the browser to instantiate all possible nodes, hide some in order to make them visible later in response to user interactions.In our case, content instantiation and attachment to the document must take place only at opportune times, as custom elements can be proxies for various tasks (e.g., sending an HTTP request to a server, or initiating a function of the hardware such as GPS location retrieval).
• Prescribe how injection happens , e.g. in a synchronous sequence, conditionally, etc.The author should be able to define the flow of execution.To allow for the general case, the software needs to provide sequential execution, conditional branching, read/write memory operations, and the ability to jump to different points in the program sequence.These purposes are served by the custom elements outlined in Table 1.
• Provide HTML tags that use semantics of the domain activity, and reduce the use of syntactic elements of layout.In order to make an HTML document easier to understand for domain experts, it serves to use terms that the match language of the application domain.Table 2 lists an indicative subset of content and User Interface oriented elements that encapsulate HTML syntax and use tag names descriptive of their utility in a AA protocol.

Software architecture
Fig. 1 presents an overview of the custom elements that make up the software release and how they relate to each other.All elements inherit from aa-base-element, which provides them with a common set of functions.Generally, execution happens as follows: 1.When attached, aa-session will look at the tag names of its immediate children.If any of them belong to the element set, it will remove their inner HTML and place it in a document fragment object that is a member of that element.This prevents their content from being instantiated, so each can decide how to process it individually.2. Most other elements, when attached to the DOM, will scan their given document fragments and perform the same replacement with their own immediate children.Each will then take appropriate action selecting and attaching content, as per their functionality.For example, aa-session will attach a copy of one child per its execution cycle (Fig. 2a), while aa-choose will only attach copies of its aawhen children whose test condition evaluates to true (Fig. 2b).Making copies into the DOM instead of moving nodes out of the document fragment and into the DOM, allows these elements to execute multiple times and keep produce new content into the document if necessary.
3. Elements such as aa-choose, aa-jump or aa-variable will also dispatch and ''end'' event, which aa-sequence listens for.Upon reception, it will attach a copy of its next child, and sequential execution will ensue.Elements such as aa-sequence do not dispatch such an event, but allow the User Interface to decide when that should be done, e.g.once the user has pressed a ''submit'' button for having answered all questions of a questionnaire.4. Elements that generate data (either captured from user input or other sources), will include it into the dispatched ''end'' event which bubbles up to the aa-session element.
In its turn, it can send a HTTP POST request to a URI that is assigned to it via a ''post-to'' attribute.

10 PRINT CHR$(205.5+RND(1)); : GOTO 10
This famous Commodore64 BASIC oneliner [10] randomly generates either \ or / and prints the character in an endless loop, producing a maze-like image.Reproducing it let us demonstrate variable writing and reading, sequential and conditional execution, and jumping in executable HTML.An equivalent program is shown in Listing 1, and Fig. 3 displays the resulting output.

Randomized part of a questionnaire
There are cases where varying items on a questionnaire encourages a participant's engagement with the material, while evaluating the same underlying constructs.In a previous study [11] participants had been asked to report on different aspects of their social interactions, with such a varying component in place.Listing 2 shows the construction of such an example for the purposes of a questionnaire, where one out of three possible aa-screen elements is selected, and waits for user input to proceed.

Impact
HTML is typically used as a language for structuring information, in a way that Web-browsers can interpret and construct a visual presentation of it for the user to peruse.Designing it, Tim Berners-Lee advocated for the rule of least power [12], according to which, the less powerful the language that is chosen for a solution is, the more easy it is to analyze and reuse the data represented in that language.Therefore HTML was intentionally designed to not be a full programming language, but meant instead for the declaration of informational materials and their syntactic features, so that software that parses HTML can perform different operations with it, such as render it in different ways, or extract specific types of information from it.
However, it is also important to facilitate users' interactions with the information in Web documents.In modern Web-browsers, while document content is expressed in HTML, interactions and procedural tasks are specified in the JavaScript programming language.Ultimately, web-document authors need to operate in the modalities of both HTML and JavaScript, which can be difficult for those who do not operate with a JavaScript programmer's mindset, and would find it easier to understand and manipulate HTML.
In the field of clinical psychology, use-cases in which this software is addressing so far, end-user-friendly ways for constructing computerized protocol materials are always desirable [13].Additionally, efforts to catalog and formalize protocol components are underway [14].
HTML is a way to represent this type of information, that is both human-readable and formally tractable [15].The custom tag names offered here can help a document's composition to that of Executable HTML contributes a procedural component, which  allows a protocol author to describe, alongside materials, also the logic of their presentation to a study participant.In the AA field, the proposed method can be impactful in the following ways: • It can reduce, or for common scenarios eliminate the need to write in a programming language, and make the distribution and reproduction of data collection protocols more accessible to researchers.Furthermore, there is abundance of tools that support the composition and publication of HTML for a very wide range of user-expertise, and can be leveraged to also support the composition of custom HTML elements.
• The same document can be just as easily treated as data instead of input to the browser.Comparisons between protocols can be made in automated ways, and matched against the data they help collect.For example, different versions of a protocol document can be contrasted against the compliance of participants each one encourages.
• It is platform-independent and not specific to any particular application framework or software product, proprietary or otherwise.Its adoption can reduce the burden of producing AA tools by being a software component, and encourage interoperability amongst software from different vendors as a protocol import/export format.

Conclusions
This paper contributes a way to treat HTML content as statements in an imperative program, by way of custom HTML elements that instantiate and attach their child-nodes in the HTML document.Motivation for this work stems from the development of a software system for the definition of ambulatory assessment protocols in psychology (e.g., to repeatedly survey participants in situ, over a sustained period).In this field, there is opportunity to serve the reproducibility of research studies by detailing procedures and materials in formal, unambiguous representations, rather than the natural language that is predominant in current literature.
While the work originates in the context of AA studies, it can potentially be of use in other applications where end-users can make use of HTML to specify programmed behavior without having to write code in JavaScript, or reduce the extent to which they have to do so.

Fig. 1 .
Fig.1.The custom elements are derived from a subclass of HTMLElement, aa-base-element, which provides them with a common set of methods for treating their contents.