---
# System prepended metadata

title: FHIR Exercise - Liver SR
tags: [tutorial]

---

---
title: FHIR Exercise - Liver SR
tags: tutorial
---

# <font color="red">FHIR</font> Exercise - Image Finding
[TOC]

## 1. What is image finding?
### 1.1. Radiology Image Exam Workflow
Here is the general radiology workflow often used in hospital, start from patient register until they get the radiology report and medical image film.
![](https://i.imgur.com/6eGk1VQ.png)

### 1.2. Image Finding Form Example
* Mammography
![](https://i.imgur.com/lLL5ksM.png)

## 2. JSON - Introduction
JSON stands for **J**ava**S**cript **O**bject **N**otation

JSON is a **text format** for storing and transporting data


### 2.1. JSON Example
Example 1: patient_john.**txt**
``` gherkin=
Name: John
ID: B5312398
Age: 30
```
If the text in example 1 is converted into JSON string, then the result is:

Example 2: patient_john.**json**
``` gherkin=
'{"name":"John", "id":"B5312398", "age":30}'
```
:::info
Function for converting JSON strings into JSON objects: **JSON.parse()**

Function for converting JSON objects into JSON strings: **JSON.stringify()**
:::

<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/victoriatjia/embed/bGvKQxE?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/victoriatjia/pen/bGvKQxE">
  Untitled</a> by 謝愛佳 (<a href="https://codepen.io/victoriatjia">@victoriatjia</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 3. [FHIR Observation](https://build.fhir.org/observation.html)
```gherkin=                           
{
  "resourceType": "Observation",
  "subject": {
    "reference": "Patient/6847426"
  },
  "component": [ 
      {
        "code": {
          "coding": [ {
            "system": "http://MISAC.org/codeSystem/massSize",
            "code": "mass.size",
            "display": "mass.size"
          } ]
        },
        "valueQuantity": {
          "value": 4,
          "unit": "cm",
          "system": "http://unitsofmeasure.org",
          "code": "cm"
        }
      }, 
      {
        "code": {
          "coding": [ {
            "system": "http://MISAC.org/codeSystem/massShape",
            "code": "mass.shape",
            "display": "mass.shape"
          } ]
        },
        "valueCodeableConcept": {
          "coding": [ {
            "system": "http://snomed.info/sct",
            "code": "129736006",
            "display": "Irregular shaped"
          } ]
        }
      } 
  ]
}
```
src: https://hapi.fhir.org/baseR4/Observation/6949306

## 4. HTML Input
### Standardized and Structured Radiology Report Development Experience

Each image finding has many characteristics to describe. And for each characteristic, we can set up the input interface and fill in the input into FHIR Observation.component. If there exist an example program source code, then adding and modifying the image finding characteristic is not that difficult, but there will be a lot of implementation needed.
For example in the following webpage example, a certain patient with a certain tumor (mass) image finding of a certain body part, currently there are two characteristic describe in the webpage:
1. Mass size
2. Mass shape

<iframe height="300" style="width: 100%;" scrolling="no" title="FHIR LIVER SR" src="https://codepen.io/victoriatjia/embed/ZExrzbe?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/victoriatjia/pen/ZExrzbe">
  FHIR LIVER SR</a> by 謝愛佳 (<a href="https://codepen.io/victoriatjia">@victoriatjia</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>
Source code url: https://github.com/victoriatjia/FHIR_Exercise_HTML


:::info
:arrow_right: [Download source code](https://github.com/victoriatjia/FHIR_Exercise_HTML) :arrow_left:
:::

#### Exercise 1. Add a new option for round shape in the Mass shape

:::spoiler 💡 Hint
```gherkin=
<input type="?" name="?" id="?" value="?">?
```
:::

:::spoiler 🔑 Answer
```gherkin=
<input type="radio" name="massShape" id="129733003" value="Round Shaped"> Round
```
:::


#### Exercise 2. Add mass margin (description for the tumor margin)
:::spoiler 💡 Hint
```gherkin=
? <br/>
<input type="?" name="?" id="?" value="?"> ?<br/>
...
<input type="?" name="?" id="?" value="?"> ?<br/>

/*JS*/
//Step 1. Set mass margin JSON template
//Step 2. Get the value in radio button and put into the mass margin JSON template
```
:::

:::spoiler 🔑 Answer
```gherkin=
/*HTML*/
Mass margin <br/>
<input type="radio" name="massMargin" id="circumscribedMargin" value="Circumscribed Margin"> Circumscribed Margin<br/>
<input type="radio" name="massMargin" id="microlobulatedMargin" value="Microlobulated Margin"> Microlobulated Margin<br/>
<input type="radio" name="massMargin" id="obscuredMargin" value="Obscured Margin"> Obscured Margin<br/>
<input type="radio" name="massMargin" id="indistinctMargin" value="Indistinct Margin"> Indistinct Margin<br/>
<input type="radio" name="massMargin" id="spiculatedMargin" value="Spiculated Margin"> Spiculated Margin<br/>

/*JS*/
//Step 1. Set mass margin JSON template
var massMargin=   
{ 
	"code": {
		"coding": [{
		  "system": "http://MISAC.org/codeSystem/massMargin",
		  "code": "mass.margin",
		  "display": "mass.margin"
		}]
	},
	"valueCodeableConcept": {   	
		"coding": [{
			"system": "http://MISAC.org/codeSystem/massMargin", 
			"code": "", 
			"display": ""
		}]
	}
};

//Step 2. Get the value in radio button and put into the mass margin JSON template
var massMarginObj= document.querySelector('input[name="massMargin"]:checked')
			massMargin.valueCodeableConcept.coding[0].code = massMarginObj.id;
			massMargin.valueCodeableConcept.coding[0].display = massMarginObj.value;
			Observation.component.push(massMargin);
```
:::

#### Exercise 3. Add "Other" radio button as a freetext option 
<!--:::spoiler 💡 Hint
asd
:::-->

:::spoiler 🔑 Answer
```gherkin=
/*HTML*/
Mass margin <br/>
<input type="radio" name="massMargin" id="circumscribedMargin" onclick="showTextbox(this.id)"> Circumscribed Margin<br/>
<input type="radio" name="massMargin" id="microlobulatedMargin" onclick="showTextbox(this.id)"> Microlobulated Margin<br/>
<input type="radio" name="massMargin" id="obscuredMargin" onclick="showTextbox(this.id)"> Obscured Margin<br/>
<input type="radio" name="massMargin" id="indistinctMargin" onclick="showTextbox(this.id)"> Indistinct Margin<br/>
<input type="radio" name="massMargin" id="spiculatedMargin" onclick="showTextbox(this.id)"> Spiculated Margin<br/>
<input type="radio" name="massMargin" id="otherMargin" onclick="showTextbox(this.id)"> Others<br/>
<input type="text" id="otherMarginValue" style="display:none"/>

/*JS*/
function showTextbox(id){
    if(id=="otherMargin")
    {
        document.getElementById("otherMarginValue").style.display= "block";
    }
    else
    {
        document.getElementById("otherMarginValue").value= "";
        document.getElementById("otherMarginValue").style.display= "none";
    }
}
```
:::