Jump to content


Photo

Simple Maths Example


  • Please log in to reply
5 replies to this topic

#1 Czar

Czar
  • Members
  • 109 posts

Posted 05 June 2017 - 01:59 AM

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://numberworksnw...cise/index.html


  • Jørn E. Angeltveit, ielite and Nico Wouterse like this

#2 ielite

ielite
  • Members
  • 691 posts

Posted 05 June 2017 - 03:59 AM

Did you do this as a canvas /graphics application or a visual components project?



#3 Czar

Czar
  • Members
  • 109 posts

Posted 05 June 2017 - 04:18 AM

It uses visual components only. My next step is to try a canvas based application



#4 ielite

ielite
  • Members
  • 691 posts

Posted 05 June 2017 - 09:43 PM

i would be interested in how you did the balls at the bottom



#5 Czar

Czar
  • Members
  • 109 posts

Posted 05 June 2017 - 10:16 PM

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;

  • ielite likes this

#6 ielite

ielite
  • Members
  • 691 posts

Posted 05 June 2017 - 10:26 PM

Interesting...thanks for sharing






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users