Getting a mathematical equation into a label

[anon-2722]

Hello,

We've had a business user approach us about getting a mathematical equation into a quiz.

We use HCL Leap to generate quizzes, and these take the form of having a label containing questions and a radio button with a variety of options, one of which is correct. This allows us to present a user with a quiz that they fill in, and if they are correct, they get a prize.

One of the business users wants a formula to appear in the quiz. The formula is:

P_D= I²_OUT​ × R_ON​ + V_IN​ × I_Q​(W)

Note the use of subscript and superscript fonting in this.

We've managed to get this into the label in the immediate term by using unicode characters for the superscript and subscript parts, i.e. using this:

PD= I²ₒᵤₜ × Rₒₙ + Vᵢₙ × IQ(W)

Note the lack of subscript and superscript fonting. This second string has the unicode character set doing the heavy lifting, so there is no font formatting done anywhere within the string. The catch with this solution is that it is something I could do, but explaining to someone non-technical the difference between a <sub> tag and a unicode character isn't something I relish.

The underlying problem here is that the label only supports one font and that everything inside the label has to be the exact same.

This isn't the first time we've had an issue like this (we've been asked many times for hyperlinks in labels!), but it's the first time that we've had a significant issue that we (almost) haven't found a workaround for.

I thought I cannot be the only person to have this problem - so I thought I'd ask.

Has anyone here had similar problems? And if so, how did you work around it?

[jayve.javier]

Hello Dudley,

You can style Subscript and Superscript tag using CSS.

I tried to copy your 1st string (that has sup and sub tags) in a text item element:

And applied the below style in this section:

Result without style:

Result with style:

Css:

sub {
font-size: 0.7em;
vertical-align: sub;
}

sup {
font-size: 0.7em;
vertical-align: super;
}

You can adjust css style above to match your design preferences.

Hope this helps.

Thanks,

Jayve

[anon-2722]

Hi Javier,

Thanks for the comprehensive answer. That uses the text object to do its legwork, and I'm not talking about the text object.

I'm doing this with a label, the text field that gets automatically when you add any kind of field.

Do you know of a clever way to handle this? 🥰

Dudley

[christopher.dawes]

The field label does not have the same flexibility as the text item. Why could you not do something like:

Where the equation is provided using a text and then the question can be below it. What are the limiting factors here that you have not disclosed to us?

I am sure that we could devise other solutions, but I would prefer to have a more complete picture of the problem and any imposed (by you) limitations.