Rhizome Q4C revision 2

Rhizome Q4C revision 2

by phollott

HTML

<div id="demonstrator">
    <div id="inside" ng-app="myApp" ng-controller="myCtrl" align="center">
        <div ng-bind="q4c.name.text" class="label"></div>
        <svg version="1.1" id="rhizSvg" rhz-svg="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="250" viewBox="0 0 100 100"></svg>
        <div id="quiz">
            <ol id="questions" class="buttonlist" rhz-question-group=""></ol>
            <button class="buttonhalf" ng-click="restartQuestionnaire()">Restart Q4C</button>
            <button class="buttonhalf" ng-click="showPayload()">Show FHIR</button>
        </div>
    </div>
</div>
<script src="//cdn.jsdelivr.net/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="//phollott.github.io/rhizome/lib/rhizome.js"></script>

CSS

#demonstrator {
    width: 305px;
    height: 520px;
    -moz-border-radius: 15px;
    border-radius: 20px;
    background-color: coral;
}
#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

var app = angular.module('myApp', ['rhizome']);
    
app.controller('myCtrl', function ($scope, codeService) {
    var resource = res;
    
    // Small timing hack once the resource is loaded
    $scope.q4c = resource.content;
    codeService.loadCodedConcepts(resource.content)
    $scope.groupHeader = resource.content.group.header;
    $scope.group = resource.content.group;
    setTimeout(function() { 
        $scope.$broadcast('RhzFocusSvg', {
            svg: resource.content.text.div,
            frame: codeService.getInitialFrame()
        }) 
    }, 0);
    
    $scope.restartQuestionnaire = function () {
        $scope.group = resource.content.group;
        $scope.$broadcast('RhzFocusSvg', { 
            frame: codeService.getInitialFrame() });
    }
    
    $scope.showPayload = function() {
        alert(JSON.stringify(resource))
    }

});
                    
// HL7 FHIR JSON Document

var res = {
    "title": "Questionnaire \"3142\" Version \"1\"",
        "id": "https://fhir.healthintersections.com.au/open/Questionnaire/3142",
        "link": [{
        "href": "https://fhir.healthintersections.com.au/open/Questionnaire/3142/_history/1",
            "rel": "self"
    }],
        "updated": "2014-11-04T00:09:57Z",
        "author": [{
        "name": "Anonymous (130.216.120.1)"
    }],
        "published": "2014-12-14T01:46:21Z",
        "content": {
        "resourceType": "Questionnaire",
            "text": {
            "status": "generated",
                "div": '<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="250" height="250"><defs><marker id="markerArrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto"><path d="M2,2 L2,8 L7,6 L2,4" /></marker></defs><rect id="question1" width="100" height="100" x="10" y="10" class="frame" /><g transform="translate(45 48)"><rect rx="3" ry="3" width="25" height="14" style="fill:none;stroke:...