JSFiddle - React, Tailwind, and code Playground

by dandapianoman

HTML

<h1>Guided Contract Drafting Prototype</h1>
<span id="mainContentPane" style="visibility:visible;">
    
    <input type="submit" value="Arbitration Agreement" style="font-size:12pt;font-weight:bold;" />
    <br />
    <input type="submit" value="Assignment Clause" style="font-size:12pt;font-weight:bold;" onclick="guidedAssignmentClause()" />
    <br />
    <input type="submit" value="Material Adverse Change Clause" style="font-size:12pt;font-weight:bold;" />
    <br />
    <input type="submit" value="Non-Disclosure Agreement" style="font-size:12pt;font-weight:bold;" />

</span>

CSS

*
{
    font-family: "Palatino Linotype", "Verdana", Serif;
}

td
{
    padding: 0px 5px 0px 5px;
    font-size: 12pt;
    width: 50%;
}

.right
{
    text-align: right;
}

.positive
{
    font-weight: bold;
    color: #009900;
}

.negative
{
    font-weight: bold;
    color: #990000;
}

JavaScript

// Guided Contract Drafting Prototype 0.1

var questionNumber;

function guidedAssignmentClause ()
{
    questionNumber = 0;
    
    document.getElementById('mainContentPane').setAttribute('style', 'visibility:hidden;');
    document.getElementById('mainContentPane').innerHTML = getQuestionRubric();
    document.getElementById('questionText').innerHTML = getAssignmentClauseQuestion(questionNumber);
    document.getElementById('mainContentPane').setAttribute('style', 'visibility:visible;');
}

function reset ()
{
    questionNumber = 0;
    
    document.getElementById('mainContentPane').setAttribute('style', 'visibility:hidden;');
    document.getElementById('mainContentPane').innerHTML = getMainMenu();
    document.getElementById('mainContentPane').setAttribute('style', 'visibility:visible;');
}

function processAnswer (buttonPressed)
{
    // Update draft clause based on user's selection.
    document.getElementById('contractTerm').innerHTML = updateAssignmentClause(questionNumber, buttonPressed);
    
    // Load next question.
    document.getElementById('questionText').innerHTML = getAssignmentClauseQuestion(++questionNumber);
}

function getAssignmentClauseQuestion (questionNum)
{
    var result;
    var completionMsg = 'Your Assignment Clause is complete.  You may copy or edit the completed clause below.';
    
    switch (questionNum)
    {
        case 0:
            result = 'Do you want to prohibit the <i>right</i> to assign rights under this contract?';
            break;
        case 1:
            result = 'Do you want to prohibit the <i>power</i> to assign rights under this contract?';
            break;
        case 2:
            result = 'Do you want to prohibit assignments resulting from mergers or other transactions?';
            break;
        case 3:
            result = 'Do you want to prohibit assignments of claims for damages resulting from the non-assigning party&#146;s breach?';
            break;
        case 4:
            result =...