Drag and drop activity

Educational object

Teach how drag and drop with the mouse in a pleasant activity

Rules

Child must make a jigsaw: first select a piece (by clicking on them and stay the button inserted), then moving the piece at its correct place (at this time, the mouse become pink) and drop the button

Screen areas

Presentation of the screen areas:

Figure 7-29. Drag and drop activity screen

  1. Chronometer activation (only for difficult level): child have 60 seconds for find all the picture... and enter in the 8 best times !

  2. selection of the game mode:

    • "normal": you have to search photographies

    • "ghost": you have to search an accurate photography marked by a yellow spot

  3. button for select the level of the activity (and adjusts it with the children age):

    Table 7-15. Drag and drop activity levels

     LevelSquire
    easyYou can drop the button if you are at less than XXX pixels of the final position of the piece
    mediumYou can drop the button if you are at less than XXX pixels of the final position of the piece
    difficultYou can drop the button if you are at less than XXX pixels of the final position of the piece
  4. button for select the previous and next lists of photographies in the same theme

  5. button for select the theme : you click on the button and the theme changes immediatly.

  6. button for quit the activity

  7. pieces of the jigsaw

  8. button for

Themes

Pysycache is provided with some GPL themes:

and other non compliant GPL themes are available:

Activity drag and drop FAQ

1. How can I make a personal theme for the "Drag" activity ?
2. How can I make pieces for the jigsaw ?
3. How can I make a jigsaw from my picture ?

1. How can I make a personal theme for the "Drag" activity ?

For made a personnal theme, follow the steps:

  1. go in the directory themes-puzzle of PySyCache.

  2. create a sub-directory (for example montheme)

  3. copy in this sub-directory the final pictures to found

  4. create three sub-directories named 0, 1 and 2 for the levels

    Figure 7-33. Creation of the subdirectory

  5. copy (or create) in these sub-directories a file named logo.png. You can use the file This picture will identify your theme at children. The size of the picture must be of 64 pixels width and 64 for height.

  6. copy in each sub-directory :

    • the model picture

    • the pieces of the jigsaw

    • the association file between background and pieces : this file must have the .dfg extension :

      										
      fond01.png
      fond01-04-modele.png
      fond01-04-01-01.png|0|0|piece-04-01-01.png 
      fond01-04-01-02.png|242|0|piece-04-01-02.png 
      fond01-04-02-01.png|0|241|piece-04-02-01.png 
      fond01-04-02-02.png|242|241|piece-04-02-02.png 

      that contents :

      • the picture to found

      • the modele (in grey) of the picture to found

      • the name of the file with the piece, a separator (|), left position of the piece, a separator (|), top position of the piece a separator (|), the piece used in the ghost mode for indicate which piece to put

2. How can I make pieces for the jigsaw ?

  • Step 1 : make the model. For make the model, you have to :

    1. launch The Gimp

    2. make an empty picture of 640 x 480 pixels (in white background)

    3. go in the "Filter/Render/Motif" menu and choice the Jigsaw entry :

      Figure 7-34. Jigsaw creation

    4. select the number of cols and rows that you want

    5. validate

    6. you have the white model for the piece of the jigsaw

  • Step 2 : sharp the pieces. For sharp the pieces of jigsaw, you have to :

    1. launch The Gimp

    2. open your model

    3. go in the "Script-fu/PySyCache" menu and choice the Jigsaw - Sharp pieces. entry :

      Figure 7-35. Sharp the pieces of the jigsaw

    4. select the number of cols and rows of your model

    5. select the target directory where your pieces will be saved

    6. validate

    7. wait fews minutes

    8. you have in your target directory all the caches for made your jigsaw :

      Figure 7-36. View of the created pieces

  • Here, you can see below a video of the script-fu usage

    3. How can I make a jigsaw from my picture ?

    For make a jigsaw from your picture, you have to use the gimp script-fu:

    1. launch The Gimp

    2. open your picture (it must have a 640 x 480 pixels of size)

    3. go in the "Script-fu/PySyCache" menu and choice the theme jigsaw... entry:

      Figure 7-37. Sharping of pieces

      • select the directory with correct pieces (size and number) and model

      • select the target directory where pieces will be copied

      • give the prefix for the name of pieces (name will be : prefix-row-col.png)

    4. validate, and wait...: yours pieces are automatically drawn and resized

      Figure 7-38. Final pieces

    5. you can make your modele in grey or in colorize it (210/50/60):

      Figure 7-39. color configuration

    6. don't forget to copy the .dfg file located in the jigsaw's model directory in your theme directory, and edit the name of the pieces (with your editor and find/replace for example)

    7. copy in your theme directory the pieces for the ghost mode : they are located in the background directory of the gimp scripts-fu

    Here, you can see below a video of the script-fu usage