0

I want to build an online quiz for academic students. I am facing a problem in mathematics, chemistry and physics subjects, regarding symbols. While it is obviously possible for me to draw a symbol every time, individually, in every such question, I want a more reusable solution.

How can I create a library of symbols (of different sizes, such as lambda in size 5 and lambda in size 10) and insert them into my equations editor? The symbols need to be moveable and delete-able (in the editing phase that is, once a question in finalized, it is added to the database and no more editing is required).

Do I need to start from grass root and start drawing symbols in different sizes? Or has it been done before and available for other developers?

Youstay Igo
  • 321
  • 2
  • 11

1 Answers1

0

I'm playing around with similar things... I'm making some progress using UTF-8. Here is some code:

<html>
<body>
<canvas id="outputcanv" height="300" width="400">
<script type="text/javascript">
var canvas
var ctx

function mathsToCanvas(s)
 {
 s=s.replace(/\s*<=\s*/g," \u2264 ")
 s=s.replace(/\s*=\s*/g,' = ')
 s=s.replace(/lamda/g,'\u03BB')
 s=s.replace(/div/g,'\u00F7')
 s=s.replace(/pi/g,'\u03C0')
 s=s.replace(/\s*\*\s*/g,' \u00D7 ')

 ctx.font = "30px Times"
 ctx.fillText(s, 100, 100)
 }

// test:
canvas = document.getElementById('outputcanv')
if (canvas.getContext)
 ctx = canvas.getContext('2d')

mathsToCanvas('6pi*2lamda<=23')
</script>
</body>
</html>

Gives output:
enter image description here
The codes to look up are standard UTF-8 codes (escaped with \u in a string). Eg see utf8-chartable.de and I'm using a global search-and-replace... in some cases putting space padding around the character.
I know this doesn't address different sizes, but maybe this helps, being able to drop the symbols in as part of your text (which you can size using the canvas font options). Nearly a year on, you're probably way ahead now, but maybe this will help someone else who might be interested...

Marcus
  • 261
  • 2
  • 5