Jump to content
Sign in to follow this  
Czar

Simple Maths Example

Recommended Posts

I have put together my first proper SMS project. It looks pretty trivial but it does have a quite a few features that are vital to what we would like to do with SMS.

 

We currently develop and maintain a large library of maths and English exercises for kids from 5 to 15 years. Currently 99% is written in Delphi. We would like to expand online and possibly convert a significant amount of our software.

 

In this case we have a simple exercise that talks to an infobar. The infobar handles feedback to the student and can store and retrieve data from a database.

NWExercise.jpg

The infobar along the bottom is in an iframe that is separate from the exercise. The huge benefit is that we can have hundreds of exercises and only one infobar to change. The two parts talk using messaging (in beta RTL).

 

I have made it so that the exercise scales to the window.

 

Finally, I grouped the essential elements of the UI, in this case just the editbox and question label, onto a transparent panel. The panel is "zoomed" based on the height of the window compared to a design time norm. This means we can develop for today's monitors but if 4k and 8k monitors become the norm then the panel and its contents will expand in size.

 

I am happy to discuss or share some code if it helps anyone with a particular issue.

 

cheers

 

http://numberworksnwords.com/cloud/exercise/index.html

Share this post


Link to post
Share on other sites

The balls are TW3IMages sandwiched between a background and a foreground image. The foreground image is a PNG with the hole 

        var FeedbackInst:= tw3image.create(self);
        FeedbackInst.zindex:=2;
        FeedbackInst.setbounds(-19,25,30,30);
        FeedbackInst.OnLoad:=procedure (sender:TObject)
          Begin
            w3_setstyle(FeedbackInst.Handle,'-webkit-transition','opacity 0.5s ease-in'); //webkit
            w3_setstyle(FeedbackInst.Handle,'transition','opacity 0.5s ease-in'); //mozilla
            FeedbackInst.AlphaBlend:=True;
          end;
        FeedbackInst.loadfromurl('res/ballGreen.png');
        FeedbackInst.tagvalue:= CNT_MYAPP_FeedbackBalls;
        FeedbackInst.fxMoveBy(30,0, 0.5);

So I basically create the image out of sight and then move them right. 

 

The existing balls are set to move before the new ball is create

 

procedure TForm1.ShiftFeedbackBalls;
begin
 for var i := GetChildCount - 1 downto 0 do
     if (GetChildObject(i) is tw3image) and (GetChildObject(i).TagValue=CNT_MyApp_Feedbackballs) then
      begin
        var img := tw3image(GetChildObject(i));
        img.fxmoveby(30,0,0.5);

        if img.Left > 190 then img.free;
      end;
end;

Share this post


Link to post
Share on other sites

Here is a small sample of a more or less finished program. We are currently looking at converting much of our Delphi library to SmartMS.

 

http://numberworksnwords.com/cloud/zap/index.html

 

This was converted from Delphi. The Tables screen is simply buttons and labels with CSS.

The robots are TW3sprites.

 

There were a few challenges that we had to overcome, nothing too major. It took me a while to realise that to get the sprite-sheet animating correctly the values had to be negative :)

 

 

zap1.jpg

 

zap2.jpg

Share this post


Link to post
Share on other sites

CHeers for that Igor, you must have a window less than 768 pixels high - in our case we can stipulate screen resolution so it won't present a problem in practice but I may figure out if it is possible to scale the entire form to fit all screens.

Share this post


Link to post
Share on other sites

> CHeers for that Igor, you must have a window less than 768 pixels high - in

> our case we can stipulate screen resolution so it won't present a

> problem in practice but I may figure out if it is possible to scale the

> entire form to fit all screens.

 

It's 1080 but windows scaling is 150% (I don't know how many people changes that from default 100).

Share this post


Link to post
Share on other sites

Ah I see. In the Index.html I had

 

 

"meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=0.5, user-scalable=yes"/"

 

I thought that initial-scale would make it half size but it seems to be ignored. I have more to learn ;)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×