Amazing module. Need a lil' help with Question Set module

Hey there,
I am very glad you made this module. I am using your module in my Drupal 7 website and I figured this module fits amazingly to my needs yet I need a little help with a few things.

I need a Drag and Drop" type module for my website and whenever I met your h5p module I have decided to use it. However, I need a bit modifications and I am so new to drupal and couldn't achieve what I needed.

I am using "Question Set" Content type and there is a "Drag and Drop Question" question type along with 2 other question types. What I need to make is to use only "Drag and Drop Question" in my Drupal 7 website. For this purpose, I want to make is;
-Add Content > Interactive Content
-Automatically Create Content page comes(without needing to select "Upload" or "Create Content" radio buttons).
-Editor sees only "Drag and Drop Question" question type by default (without messing with other question types.)

So in this process, I want to make some unwanted stuff not to be seen to the editor to make it mroe usable for my needs.
I am sure this can be made inside codes by changing some defaults. I have tried to use JS code to make selecting radio buttons automatically by visiting the node/add for Interactive Content type in a custom tpl.php that I created via a custom module.
<script type="text/javascript">
jQuery("#edit-h5p-type-create").attr('checked', 'checked');
</script>

It works but I couldn't managed to work JS for selecting Question types automatically.

I will appreciate any help. I am very thankful for this module as this saves me a lot of time and effort.

fnoks's picture

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);
}

- 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's picture

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?

 

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.

falcon's picture

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.

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 

falcon's picture

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

  1. 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?
  2. Has the html you're trying to change been added to the page when your code is running?

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: 
falcon's picture

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
),
      ),
    ),
  );

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.

 

 

falcon's picture

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.

Sorry but I couldn't managed  to set default value for "Question Type"  to load "drag and drop" form automatically. Could you please tell me how to do this job just by inside the module? 
Thanks in advance,