JSFiddle - React, Tailwind, and code Playground

by austegard

HTML

<h1>Some simulated article</h1>
Lorem ipsum, all that jazz
<br>
<br>
<form action="https://docs.google.com/forms/d/1z26UX603x5UhzRTVk7G7hku63N5h0BeEh-PNqSDwoKM/formResponse" method="POST" id="ss-form" target="_self" onsubmit="">
    <label for="entry_1742385195">Enter an Article ID</label>
    <input type="text" name="entry.1742385195" value="" id="entry_1742385195">
    <br/>
    <label for="entry_815292323">AtyponId</label>
    <input type="text" name="entry.815292323" id="entry_815292323">
    <br/>
    <!-- <input type="radio" name="entry.2045578946" value="Like" id="group_2045578946_1" role="radio">Like
    <br/>
    <input type="radio" name="entry.2045578946" value="Dislike" id="group_2045578946_2" role="radio">Dislike
    <br/>
    <input type="submit" name="submit" value="Submit" id="ss-submit">
-->then click a button:</form>
<div class="util-bar-primary-modules">article modules go here in a sidebar</div>
<div id="confirmation">confirmation here (won't be on page)</div> <a href="https://docs.google.com/spreadsheets/d/1xAh9YlXT6ikko40Vt5Mu0G8y1f609AK_w-eiffP-1nI/edit?usp=sharing" target="results">Results</a>

CSS

label {
    font-weight: bold;
}
.util-bar-primary-modules {
    border: solid 1px red
}

JavaScript

$(function () {

//setup
window.stateManager = {
    "getActivePageInfo": function () {
        return {
            "assetid": $("#entry_1742385195").val(),
            "headline": "some headline",
            "ssts": "foo/bar"
        };
    }
};

window._scDilObj = { prop68: $("#entry_815292323").val()};

    //***************************** start

    $(".util-bar-primary-modules").prepend($("<button id='jsLike'>Like</button><button id='jsDislike'>Dislike</button>"));

    $("#jsLike, #jsDislike").click(function () {
        var sentiment = $(this).text();
        var pi = stateManager.getActivePageInfo();
        var ffId = _scDilObj.prop68;

        $.ajax({
            url: "https://docs.google.com/forms/d/1z26UX603x5UhzRTVk7G7hku63N5h0BeEh-PNqSDwoKM/formResponse",
            data: {
                "entry.1742385195": pi.assetid,
                "entry.2045578946": sentiment,
                "entry.815292323": ffId,
                "entry.1348947856": pi.headline,
                "entry.1877746370": pi.ssts
            },
            type: "POST",
            dataType: "xml",
            statusCode: {
                0: function () {
                    $("#confirmation").text(ffId + ": " + JSON.stringify(pi));
                }
            }
        });
    });

    //***************************** end
});

//stateManager.getActivePageInfo()