Amazing module. Need a lil&#039; help with Question Set module

To only get Drag and drop

To only get Drag and drop inside a question set, you may delete the other H5P libraries (multichoice and blanks) from here: http://your.drupal.site/admin/content/h5p (This is only possible if you haven't created any nodes using these H5P content types)

The H5P editor (including the content type selector) is rendered inside an iframe. Therefore you need to add a Drupal-hook that adds CSS and/or JS to make the editor behave as you want. Here is an example of such a hook:

function modulename_form_h5p_content_node_form_alter(&$form, &$form_state) {
  $module_path = drupal_get_path('module', 'modulename');
  $cache_buster = '?' . variable_get('css_js_query_string', '');
  
  // Set the defauklt value to create (not upload)  
  $form['h5p_type']['#default_value'] = 'create';
  // Change the label for the selector
  $form['h5p_editor']['#title'] = t('Select content type');
  // Remove upload
  unset($form['h5p_type']['#options']['upload']);
  
  // Add CSS to Editor-iFrame
  $settings = array(
    'h5peditor' => array(
      'assets' => array(
        'css' => array (
          $module_path . '/styles/filename.css' . $cache_buster
        ),
      ),
    ),
  );
  drupal_add_js($settings, array('type' => 'setting', 'scope' => JS_DEFAULT));
  
  // Also add the css to the main document (outside the editor iframe)
  drupal_add_css($module_path . '/styles/filename.css' . $cache_buster);
}

Thu, 10/23/2014 - 15:32

Thanks for the fast reply.

- So from your post I understand that I need to create a custom module for this. And add this custom code to modify h5p-node-edit-form with my modulename, path etc. right? Or may I just modify the current module ?
-Also, I forgot to mention that I also need to disable/hide "Settings" Tab and Only editor needs to see "Task" tab. Only thing the editors will do is "Adding title" "Adding Images" "Adding Droppable Areas with Labels" and Placing those images and labes however they want.
- Lastly, I need to add infinite images with labels but it seems this is not possible with this module and I really don't have that much experience to establish such a module. But if there is a way to accomplish adding infinite images&labels (scrolling down pages) I will be glad to hear that. Thanks again.

fnoks

Fri, 10/24/2014 - 10:29

You are correct, you should

You are correct, you should create a custom Drupa module for this. If you modify the H5P-module directly, you will be in trouble when you want to update this module.

You may use CSS to hide parts of the editor

I am not sure what you mean by "infinite images with labels"? Could you please try to explain a use case?

Mon, 10/27/2014 - 10:31

I mean adding more iamges that the one scene

In this module, as I see from the "Task" interface, we can only add a limited number of images and drop-zones respectively. For this purpose, I wanted to ask if it is possible to achieve adding drag-and drop images and drop-zones as many as I can; I mean I will add images and dropzones so many and they will be showed under each other. This way users may scroll down pages and match the images. But later, It hought thsi will not be useful if an image is at the top of the page and the dropz-zone is at the very bottom. So I changed my mind. One screen will be enough for me till I can find a way to accomplish this (Maybe I may split screen into 2 vertical parts and there will be images in one and drop-zones inside the other and those 2 seperate vertical iframe parts can have scrolling;like a slot machine, just thought).

One more thing, is it possible to place added images side by side inside editor screen? When I add images, they will all stay at left-top corner onto each other. I know this is hard stuff as we may not know the size of the images each time, but we may give some spacing for each image maybe? So they will not stand on each other.

Thanks for the help. Keep up the good work.

Mon, 10/27/2014 - 21:36

I see :)If you click on the

I see :)

If you click on the image icon to insert an image it will be placed in the top left corner, but if you press, drag and release the image where you want it they won't stack on top of each other.

Mon, 10/27/2014 - 16:34

How can I set h5p_Editor dropdown default

I've written the module as u suggested but still I couldn't set the default value for "h5p_editor" dropdown list(select content type) as the create/upload radio buttons. Btw, CSS is not working for edit-form still. Dunnow what I am doing wrong. I have created a default.css under mymodule/styles/default.css yet, it doesn't affect any. Any help is apprecaited. I dunno why js for radio buttons worked and not worked for content-types dropdown list inside h5p_content-node-form.tpl.php

Mon, 10/27/2014 - 21:40

My first hunch is that I

My first hunch is that I would look into two things:

Is your js running in the frame you're trying to make changes to? The H5P editor runs in an iframe. Is your code in the same iframe?
Has the html you're trying to change been added to the page when your code is running?

Tue, 10/28/2014 - 13:21

I have no idea where to put JS/CSS files ..

I just tried to use the hook that fnoks suggested. It chooses "create" option automatically as I needed, but couldn't manage to work it inside iframe. To put in order the stuff I need to do;

1. Selecting the "Question Set" from the content type drop-down list.

2. Selecting the "Drag and Drop Question" type from the question type drop-down list.

3. Providing "Task" window to the editors. They will not mess with "Settings" page. So they will not be able to break things.

-And also wanna hide some unwanted stuff.

I thought the module that fnoks provided would fix this issue but it didn't. maybe I am doing some stuff wrong. Can you please give deatiled answer so I know where to put css/js codes that will work inside iframe? Or maybe

I can directly change stuff inside module. I also added a picture to make it more clear. Thanks for your effort.

Attachments:

h5p.png

Thu, 10/30/2014 - 21:16

I haven't tested it myself,

I haven't tested it myself, but it is probably this part that is to be used to add css and js to the iframe (And you must add the js and css files yourself with code that does the things you need to get done):
// Add CSS to Editor-iFrame
  $settings = array(
    'h5peditor' => array(
      'assets' => array(
        'css' => array (
          $module_path . '/styles/filename.css' . $cache_buster
        ),
'js' => array (
$module_path . '/js/filename.js' . $cache_buster
),
      ),
    ),
  );

Fri, 10/31/2014 - 17:05

It works

The css now works inside iframe but still I couldn't manage to set default value for "Question Type"
The Code that I used is;

<code>// Set the default value to create (not upload)
$form['h5p_type']['#default_value'] = 'create';
// Set the default value to "Drag and drop question"
$form['h5p_editor']['#default_value'] = 'H5P.DragQuestion 1.0';</code>

I have looked for the value in the source and it was "H5P.DragQuestion 1.0" but it does not automatically selects this one.
Is it a loading problem? Should it be triggered after some time so that it understands "create" is loaded.
Thanks in advance.

Sat, 11/01/2014 - 10:04

You're making progress, good!

You're making progress, good! You must set the default content type with javascript. I'm not sure about the timing. There is an ajax event that needs to finish before you can choose default content type but I'm not sure how you may have H5P trigger your code after the ajax event has been completed.

Fri, 11/07/2014 - 16:31