Rhizome Q4C

Rhizome Questions for Care Demonstrator

HTML

<script src="http://cdn.jsdelivr.net/snap.svg/0.3.0/snap.svg-min.js"></script>
<div id="demonstrator">
    <div id="inside" ng-app="myApp" ng-controller="myCtrl" align="center">
        <div ng-bind="questionnaire.name.text" class="label"></div>
        <svg version="1.1" id="rhizSvg" rh-frame="hi" rhiz-svg-panel="" width="250" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"></svg>
        <!-- Angular View template for the Quiz part -->
        <div id="quiz">
            <ol id="questions" class="buttonlist">
                <li ng-repeat="question in group.question">
                    <div class="question" ng-bind="question.text"></div>
                    <ol id="options" class="buttonlist">
                        <li ng-repeat="option in getOptions(question.options.reference)">
                            <button class="buttonface" ng-click="loadGroup(question, option.code, option.system)" ng-bind="option.display"></button>
                        </li>
                    </ol>
                </li>
            </ol>
            <button class="buttonhalf" ng-click="focusHome()">Restart Q4C</button>
            <button class="buttonhalf" ng-click="showPayload()">Show FHIR</button>
        </div>
    </div>
</div>
<div id="theory-details">This Rhizome: Questions 4 Care demonstrator is based on 3 guiding principles:
    <ul>
        <li><em>Standards-based</em> - the FHIR standard is emerging as a healthcare-industry standard, meaning that a client-side app can be developed separately from a server-side API, as long as these are both implementing the same standard. This is an example of client-server interoperability.</li>
        <li><em>Resource-based</em> - in this case, the FHIR Questionnaire resource can be used by itself or in combination with other FHIR resources. You can see the Questionnaire resource with the "Show FHIR" button.</li>
        <li><em>Reuse of existing assets</em> -...

CSS

#demonstrator {
    width: 305px;
    height: 520px;
    -moz-border-radius: 15px;
    border-radius: 20px;
    background-color: cornflowerblue;
}
#inside {
    position: absolute;
    width: 280px;
    height: 410px;
    top: 50px;
    left: 20px;
    background-color: darkgray
}
#rhizSvg {
    background-color: white
}
#quiz {
    width:252px;
    height:200px;
    padding: 0px;
    margin: 0px;
    font-family: Helvetica, sans-serif;
    font-size: 10pt
}
.frame {
    opacity: 0
}
.buttonface {
    width: 250px;
    height: 25px;
}
.buttonhalf {
    width: 123px;
    height: 25px;
    font-size: 8pt
}
ol.buttonlist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.question {
    padding: 5px;
    max-width: 250px;
}
.label {
    font-family: Helvetica, sans-serif;
    font-size: 10pt;
    font-weight: bold
}
#theory-details {
    position: absolute;
    top: 50px;
    left: 350px;
    width: 400px;
    /*    background-color:gray */
}

JavaScript

// Initialize Angular modules
var app = angular.module('myApp', ['rhizome']);
var rhizome = angular.module('rhizome', []);

// Angular Custom Directive that wraps SnapSVG
rhizome.directive('rhizSvgPanel', function () {
    return function ($scope, $element, $attr) {
        var svg, svgRoot = Snap($element[0])

        $scope.$on('FocusFrame', function (evt, frId) {
            focusFrame(frId, 2000)
        });

        loadSvg = function (text) {
            var svgFrag = Snap.parse(text)
            svgRoot.append(svgFrag)
            svg = svgRoot.select("#svg")
        }

        focusFrame = function (frId, dur) {
            var fr = svg.select(frId)
            svg.animate({
                x: 0 - fr.attr('x'),
                y: 0 - fr.attr('y')
            }, dur)
        }

        initialize = function (svgText, initialFrame) {
            loadSvg(svgText)
            focusFrame(initialFrame, 0)
        }

        initialize(res.content.text.div, '#question1')
    }
});

// Angular Controller that connects the Directive to
// the ViewModel and to the Code Service
rhizome.controller('myCtrl', function ($scope, codeService) {

    $scope.focusHome = function () {
        var svgPanel = 
        $scope.group = res.content.group
        $scope.$broadcast('FocusFrame', '#question1')
    }

    $scope.showPayload = function () {
        console.log(JSON.stringify(res));
        alert(JSON.stringify(res))
    }

    $scope.getOptions = function (optRef) {
        return codeService.getConcept(optRef, true)
    }

    $scope.loadGroup = function (question, optCode, optCodeSys) {
        var group = question.group;
        for (g in group) {
            var coding = group[g].name.coding;
            for (c in coding) {
                if ((coding[c].code === optCode) && (coding[c].system === optCodeSys)) {
                    var opt = group[g].question[0].options.reference
                    $scope.$broadcast('FocusFrame', opt);
                   ...