Rhizome Q4C revision 3

Rhizome Q4C revision 3 - looks pretty good in landscape mode now, but still does not work with iframe

by phollott

HTML

<script src="//phollott.github.io/rhizome/lib/rhizome.js"></script>
<script src="//cdn.jsdelivr.net/snap.svg/0.3.0/snap.svg-min.js"></script>
<div id="inside-content" ng-app="rhizApp" ng-controller="myCtrl" align="center">
    <svg version="1.1" id="rhizSvg" rhz-svg="" width="230" height="230" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
    <div id="quiz">
        <div ng-bind="q4c.name.text" class="label"></div>
        <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>
        <button class="buttonhalf" ng-click="test()">Test</button>
    </div>
</div>

CSS

/* 640 x 390 
https://jsfiddle.net/phollott/f0rjwtuq/3/embedded/result/*/
#inside-content {
    position: absolute;
    width: 500px;
    height: 250px;
    background-color: darkgray
}
#rhizSvg {
    position:absolute;
    top:10px;
    left:10px;
    background-color: white
}
#quiz {
    position:absolute;
    top:20px;
    left:245px; /*385*/
    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('rhizApp', ['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))
    }

    $scope.test = function() {
        $rootScope.broadcast('RhzTest', {
            test: 'hello'
        });
    }
    
});
                    
// 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"...