Fractions and Special Characters - UPDATED

[Graham Quince]

I've just been involved in transferring a lot of science content into Frog and every so often I needed a particular symbol or fraction.

The WIRIS formula editor in the text widget (and elsewhere) is pretty good, but occasionally I struggled to find the right symbol, so I put this site together:

https://concept-demo.frogos.net/fraction

It's a simple form which assembles a fraction using super- and sub-script, but when you copy and paste it, it appears as a single character.

I also started to need specific symbols so started assembling them into the table below.  Same practice, just copy and paste.

The site uses an HTML widget, so can't be shared on the FrogStore, you're welcome to use it in situ, but if you'd like to recreate it, here's the code:

<style>
    .fraction {
        height: 50px;
        width: 100px;
        text-align: center;
        border: 1px solid #CCCCCC;
        border-radius: 5px;
        padding: 10px;
        color: #000000;
        font-size: 18pt;
    }
    .inputtext {
        text-align: center;
        width: 50px;
    }
</style>

Numerator : <input class="num inputtext" name="num" type="text"> / 
Denominator : <input class="denom inputtext" name="denom" type="text">
<br>
<btn class="gen btn">Generate</btn>
<br><br>

<div class="fraction"></div>


<script>
var num = arguments[0].find('.num');
var denom = arguments[0].find('.denom');
var gen = arguments[0].find('.gen');
var fraction = arguments[0].find('.fraction');
   
   
    gen.click(function(){
       fraction.html(
           '<sup>'+num.val()+'</sup>&frasl;<sub>'+denom.val()+'</sub>'
       );
    });
      
</script>

 

Within minutes of posting, I remembered a second challenge I was having with word equations, so I've coded a second bit of HTML to create a table which can be copied-and-pasted directly into a text widget.  You can create tables like this in a text widget, but the idea here is that this will be much quicker:

<style>
    .wordfraction {
        height: 100px;
        text-align: center;
        border: 1px solid #CCCCCC;
        border-radius: 5px;
        padding: 10px;
        color: #000000;
        font-size: 18pt;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
    }
    .inputtext {
        width: 80% !important;
        text-align: center !important;
    }
    
</style>

<table class="table table-bordered" cellpadding="10" style="color: #000000;">
    <tr>
        <td style="vertical-align: middle;" rowspan="2">Before:<br><input class="before inputtext" name="before" type="text"></td>
        <td style="border-bottom: 2px solid #000000; margin-bottom: 5px;">Top:<br><input class="top inputtext" name="top" type="text"></td>
        <td style="vertical-align: middle;" rowspan="2">After:<br><input class="after inputtext" name="after" type="text"></td>
    </tr>
    <tr>
        <td>Bottom:<br><input class="bottom inputtext" name="bottom" type="text"></td>
    </tr>
    
</table>

<btn class="gen btn">Generate</btn>
<br>

<div class="wordfraction"></div>


<script>
var before = arguments[0].find('.before');
var top = arguments[0].find('.top');
var bottom = arguments[0].find('.bottom');
var after = arguments[0].find('.after');
var gen = arguments[0].find('.gen');
var wordfraction = arguments[0].find('.wordfraction');
   
   
    gen.click(function(){
       wordfraction.html(
           '<table cellpadding="5px">'+
           '<tr>'+
           '<td rowspan="2">'+before.val()+'</td>'+
           '<td style="border-bottom: 2px solid #000000; margin-bottom: 5px;">'+top.val()+'</td>'+
           '<td rowspan="2">'+after.val()+'</td>'+
           '</tr>'+
           '<tr><td>'+bottom.val()+'</td></tr>'+
           '<table>'
       );
    });
      
</script>