JSFiddle - React, Tailwind, and code Playground

by lforms

HTML

<body>
  <link href="https://lhcforms-static.nlm.nih.gov/lforms-versions/34.0.0/webcomponent/styles.css" media="screen" rel="stylesheet" />
  <div id="formContainer">
  </div>
  <script
   src="https://lhcforms-static.nlm.nih.gov/lforms-versions/34.0.0/webcomponent/assets/lib/zone.min.js"></script>
  <script
   src="https://lhcforms-static.nlm.nih.gov/lforms-versions/34.0.0/webcomponent/lhc-forms.js"></script>
  <script
   src="https://lhcforms-static.nlm.nih.gov/lforms-versions/34.0.0/fhir/R4/lformsFHIR.min.js"></script>
</body>

CSS

body {
  padding: 0.5em;
}

JavaScript

// This is the form definition
var formDef = {
  "status": "draft",
  "title": "Demo form",
  "resourceType": "Questionnaire",
  "item": [
    {
      "type": "string",
      "linkId": "/X-001",
      "text": "Favorite dessert (try ice cream)"
    },
    {
      "type": "string",
      "code": [
        {
          "code": "X-002",
          "display": "Ice cream flavor?"
        }
      ],
      "required": false,
      "linkId": "/X-002",
      "text": "Ice cream flavor?",
      "enableWhen": [
        {
          "answerString": "ice cream",
          "question": "/X-001",
          "operator": "="
        }
      ]
    },
    {
      "type": "choice",
      "linkId": "/X-003",
      "text": "Favorite color",
      "answerOption": [
        {
          "valueCoding": {
            "code": "c",
            "display": "Green"
          }
        },
        {
          "valueCoding": {
            "code": "o",
            "display": "Other"
          }
        }
      ]
    },
    {
      "type": "string",
      "linkId": "/X-004",
      "text": "Which shade of green?",
      "enableWhen": [
        {
          "answerCoding": {
            "code": "c"
          },
          "question": "/X-003",
          "operator": "="
        }
      ]
    },
    {
      "type": "decimal",
      "linkId": "/X-005",
      "text": "Favorite number (try > 10)"
    },
    {
      "type": "decimal",
      "linkId": "/X-006",
      "text": "Favorite <= 10?  (shown if previous is > 10)",
      "enableWhen": [
        {
          "answerDecimal": 10,
          "question": "/X-005",
          "operator": ">"
        }
      ]
    }
  ]
};

LForms.Util.addFormToPage(formDef, 'formContainer');