Jump to content
Graham Quince

Fractions and Special Characters - UPDATED

Recommended Posts

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

fraction_gen.PNG

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>

 

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...