Projects/Edu/Parley/Theme Creation: Difference between revisions

    From KDE TechBase
    < Projects‎ | Edu‎ | Parley
    No edit summary
    No edit summary
     
    (6 intermediate revisions by 3 users not shown)
    Line 1: Line 1:
    == Parley Practice Themeing Guide ==
    To create a Parley theme you need to edit a SVG file.


    SVG files can contain multiple elements and they have to follow a naming convention so that parley can show the right items.


    ==Available Elements==
    The easiest is to find a finished svg file and change it to your liking.
    Any of these can be visible or invisible.
    Note on terminology: 'solution' is the correct response. 'answer' is anything the user inputs, and it may or may not match the solution.


    One theme you can get directly from kde's source code repository is the default one:
    http://websvn.kde.org/*checkout*/trunk/KDE/kdeedu/parley/themes/theme_reference.svgz
    This file contains some instructions how the items have to be named.


    ===Input===
    Other themes are here: http://kde-look.org/?xcontentmode=85
    The question text will be placed here, vertically and horizontally centered
    *'''question_text_box'''
    The text on the flashcard will be placed here (both the question and solution will be put here)
    * '''flashcard_text_box'''
    This holds the multiple choice widget.
    Note: Up to 9 choices are allowed (this may be reduced), and 5 is default, so this has to be fairly large.
    * '''answer_mc_box'''


    ===Question Prompt===
    The text input widget will be placed here
    * '''answer_text_box'''
    This box holds the mixed up letters.
    Note: Make this reasonably large.
    * '''question_mixed_letters_box'''


    To test a theme you need three files:
    - themename.desktop which describes the theme with its name and points to the image files.
    - themename.png or .jpg as preview
    - themename.svgz is a compressed svg file which contains the actual graphics


    ===Optional===
    The files have to be found by Parley, so they should be in a hidden directory at this location:
    this element will be scaled in proportion to bar_background to show progress. Note: if existent, it must be visible.
    /home/your_user_name/.kde/share/apps/parley/themes
    * '''progress_bar'''
    This element will determine how the bar in scaled. At 100% progress, bar will cover the same area as bar_background
    * '''progress_bar_background'''
    A feedback sentence is placed here, telling the user if the answer is correct and giving hints if it is wrong, among other things. This is highly recommended in a theme.
    * '''feedback_box'''
    This will display "Enter Translation:" (or a i18n'ed version thereof)
    * '''instruction_box'''


    ===Optional GUI Elements===
    When you created the three files you can start Parley and it should automatically find your new theme.
    Note: If the following elements do not exist, the features are still available from the menus.
    A button that toggles between displaying 'check answer' and 'continue' is placed here.
    * '''continue_button'''
    Note: These can be turned off in settings; if they are, the buttons won't be shown (read: make them invisible or it will look weird)
     
    Shows a button to skip to the next question while signaling you know the solution
    * '''skip_known_button'''
    Shows a button to skip to the next question while signally you don't know the solution
    * '''skip_unknown_button'''
    Shows a button to give a hint.
    * '''hint_button'''
    Shows the solution and counts the question as incorrectly answered (See flashcards mode for an exception)
    * '''show_solution_button'''
     
    ===Timers===
    Implement either 0 or 1 of these:
    Note: As of 8/12, these are not yet supported in themes.
    A timer is shown as an embedded QProgressBar.
    * '''timer_progress_box'''
    A timer is shown as a number in an embedded widget.
    * '''timer_digital_clock'''
    A timer is shown as a progress bar (counting down).
    * '''timer_bar''' / '''timer_bar_background'''
    A timer is shown as a graphical clock of some sort.
    * '''timer_clock'''
     
     
    ===Sound & Images===
    '''image_box''' and '''sound_box''' can be added to any mode, but be aware they are not necessarily common and can be disabled; don't make the existence of an image integral to your UI design.
     
    If an active area (see below) exists with a name that is suffixed by _image (eg '''written_image''', elements become '''written_image_question_text_box'''), that layout will be used for questions that have associated images. If such an area does not exist, the normal area will always be used.
     
     
     
    ==Elements required==
     
    ===Written===
    ===Example===
    ===Paraphrase===
    * '''answer_text_box'''
    * '''question_text_box'''
     
    ===Flashcard===
    * '''flashcard_text_box'''
    On this one it shows the solution, but doesn't automatically count it as wrong. Also, it is non-optional for this mode.
    * '''show_solution_button'''
    This indicates you know the solution
    * '''known_button'''
    This indicates you didn't know the solution
    * '''unknown_button'''
     
    ===Multiple Choice===
    ===Article===
    ===Antonym===
    ===Synonym===
    * '''question_text_box'''
    * '''answer_mc_box'''
     
    ===Mixed Letters===
    * '''question_mixed_letters_box'''
    * '''question_text_box'''
    * '''answer_text_box'''
     
    ===Comparison===
    Displays "Absolute:"
    * '''absolute_instruction_box'''
    Displays "Comparative:"
    * '''comparative_instruction_box'''
    Displays "Superlative:"
    * '''superlative_instruction_box'''
    Text box for the user to enter the absolute (normal) form.
    * '''absolute_text_box'''
    Text box for the user to enter the comparative form.
    * '''comparative_text_box'''
    Text box for the user to enter the superlative form.
    * '''superlative_text_box'''
     
    ===Conjugation===
    These are all used to prompt for various conjugation tenses
    make the question_text_boxes fairly long; a significant amount of text may be placed there
    The answer_text_boxes can be fairly short
    For example, infinitive_question_text_box would say "Infinitive"
    infinitive_answer_text_box would say "to be" (even though this is a line edit, it would be prepopulated)<br>
    '''question_text_box_1''' would say "First-person plural present"<br>
    '''answer_text_box_1''' would want "are"<br>
     
    This is used for the infinitive label (It will display "Infinitive").
    * '''question_text_box_infinitive'''
    * '''answer_text_box_infinitive'''
    * '''answer_text_box_1'''
    * '''question_text_box_1'''
    * '''answer_text_box_2'''
    * '''question_text_box_2'''
    * '''answer_text_box_2'''
    * '''question_text_box_2'''
     
     
    ===Main background===
    '''main''', with element '''active_area''' that active areas (below) are placed in.
     
     
    ==Active Area==
     
    Active areas are the parts of the practice that change depending on the mode. For the modes with defaults listed,
    if you do not provide an area for that mode, it will fall back to the listed mode.
    <br>
    To create an active area, make a rectangle the same size as the '''active_area''' element and name it '''modename_background'''. Add all the other elements on top of it,
    and then group them and name the group '''modename'''.
    <br>
    Elements that are part of an active area should be prefixed with the area name and '''_''' (eg '''written_answer_text_box''')
    Elements are are NOT part of an active area (ie they are part of the main group) should be prefixed with '''main_''' (eg '''main_progress_bar''').
     
    {| border="1"
    | '''Active Area Name''' || '''Fallback active area'''
    |-
    | '''written'''
    |-
    | '''flashcard'''
    |-
    | '''multiple_choice'''
    |-
    | '''comparison'''
    |-
    | '''mixed_letters'''
    |-
    | '''conjugation'''
    |-
    | '''article''' || '''multiple_choice'''
    |-
    | '''example''' || '''written'''
    |-
    | '''paraphrase''' || '''written'''
    |-
    | '''antonym''' || '''multiple_choice'''
    |-
    | '''synonym''' || '''multiple_choice'''
    |}

    Latest revision as of 14:10, 23 November 2010

    To create a Parley theme you need to edit a SVG file.

    SVG files can contain multiple elements and they have to follow a naming convention so that parley can show the right items.

    The easiest is to find a finished svg file and change it to your liking.

    One theme you can get directly from kde's source code repository is the default one: http://websvn.kde.org/*checkout*/trunk/KDE/kdeedu/parley/themes/theme_reference.svgz This file contains some instructions how the items have to be named.

    Other themes are here: http://kde-look.org/?xcontentmode=85


    To test a theme you need three files: - themename.desktop which describes the theme with its name and points to the image files. - themename.png or .jpg as preview - themename.svgz is a compressed svg file which contains the actual graphics

    The files have to be found by Parley, so they should be in a hidden directory at this location: /home/your_user_name/.kde/share/apps/parley/themes

    When you created the three files you can start Parley and it should automatically find your new theme.