JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://adlnet.github.io/xapi-lab/js/xapiwrapper.min.js"></script>
    <form onsubmit="return submission()">
      <label class="question">What does xAPI stand for?</label>
      <label><input type="radio" name="question1" /> Xylophone API</label>
      <label><input type="radio" name="question1" /> Extra API</label>
      <label><input type="radio" name="question1" /> Experience API</label>
      <label><input type="radio" name="question1" /> Xylan API</label>
      <br />
      <label class="question">What does LRS stand for?</label>
      <label><input type="radio" name="question2" /> Lovely Return Shop</label>
      <label><input type="radio" name="question2" /> Learning Record Store</label>
      <label><input type="radio" name="question2" /> Learn, Read, Share</label>
      <label><input type="radio" name="question2" /> Learn Resource System</label>
      <br />
      <input type="submit" />
      <p><em>After you choose an answer or click submit, you can verify a statement has been sent to the LRS using the <a href="http://adlnet.github.io/xapi-statement-viewer/" target="_blank">Statement Viewer</a>.</em></p>
    </form>

CSS

label.question, #submit {
        font-weight:bold;
        margin-top:10px;
      }
      form {
        background-color:#eee;
        padding:10px;
      }
      label {
        display:block;
      }

JavaScript

// Configure xapiwrapper to work with our LRS
      var conf = {
         "endpoint" : "https://lrs.adlnet.gov/xapi/",
         "auth" : "Basic " + toBase64('xapi-tools:xapi-tools'),
      };
      ADL.XAPIWrapper.changeConfig(conf);

      $(function(){
        // Bind to radio selection events and call the "answered" function
        $('input[type="radio"]').click(function(e, v){
          // Get the text from the parent label and strip off whitespace
          answered($(this).parent("label").text().trim());
        });
      });

      // Used to capture an answer selection
      function answered(answer) {        
        var statement = {
            "actor": {
                "mbox": "mailto:tyler.mulligan.ctr@adlnet.gov",
                "name": "Tyler",
                "objectType": "Agent"
            },
            "verb": {
                "id": "http://adlnet.gov/expapi/verbs/answered",
                "display": {
                    "en-US": "answered"
                }
            },
            "object": {
                "id": "http://adlnet.gov/expapi/tutorials/xapiwrapper/assessment",
                "definition": {
                    "name": {
                        "en-US": "xAPI Wrapper Assessment Demo"
                    },
                    "description": {
                        "en-US": "Demonstrating xAPI Wrapper used with an assessment form"
                    }
                },
                "objectType": "Activity"
            },
            "result": {
                "response": answer
            },
            "context": {
                "contextActivities": {
                    "parent": [
                        {
                            "definition": {
                                "name": {
                                    "en-US": "xAPI Wrapper Tutorial"
                                },
                                "description": {
                                    "en-US": "A tutorial for using...