Experiment ground

If you're not Integral6 then you probably shouldn't be seeing this page. Well, not like they care. Feast your eyes... or don't.

Math problems and formulas

A lot of math problems require at least two rows of space to be able to convey division in a clean way. Some may even require more. In theory, it should be possible to easily describe division without hard-writing your problems and formulas into a picture via tables. My first experiment should achieve that effect and keep it in-line.

Examples

1.  sinx < a (| a | ≤ 1) 

2.
 ∫ shₐxdx = 1 chₐx 
ₐ

Result assessment

The experiment has been successful. Hooray! While the results could use a little polish, that can be dealt with later- so long as the result works and is maintainable.


Variable highlighting

When you're not very confident in math, it can get hard to follow variables as they mutate throughout the problem. This problem should be easy to solve by using HTML classes, the ‹span› tag, and CSS alongside the use of the :hover pseudoclass.

I'll try to use up to 8 colours for the text and one for the background. I'll have to see if I can add a small highlight to the background as well.

  1. Background: #eef5f7
  2. Colour 1: #d7373a
  3. Colour 2: #da7d1a
  4. Colour 3: #e3cb2d
  5. Colour 4: #4db935
  6. Colour 5: #7cc5e8
  7. Colour 6: #3933e1
  8. Colour 7: #a24ae1
  9. Colour 8: #e584e3

Example

 a-n 1 
an

Result assessment

As of writing this, the results are a partial success- as in they highlight the text with the correct colours, just not all of the elements with the same indicator-, however they highlight another issue: the mouse cursor. The cursor easily gets in the way of the problem, making it harder to see the text below.

While I did apply animations and make the highlighted text slightly bigger, it still doesn't adress the issue of the cursor. A potential solution is adding a palette to the website that follows the user around. I'll probably add that sometime.

Another problem is mobile users. If I want to try to make the website somewhat accessible, I should implement a solution that works for mobile users as well.

A yet another problem is the fact that several elements don't get targeted at once. Targetting the parent component containing the elements doesn't help solve the issue, as hovering over it would end up highlighting everything within the area, all at once. Talk about unhelpful! JS should help fix that... another day.