quick note: how to get started with qualtrics

Access to Qualtrics is by UAnet ID and password.

Start by going to http://akron.qualtrics.com

You’ll be directed to the UAkron log in screen.  Enter your UAnet ID and password.

Next, you’ll be taken to a screen about a Qualtrics account.  Indicate that do you not already have an account and Qualtrics will create one and sync this with your UAnet ID.

You will then be asked to review a terms of service document and/or indicate student status.  Once this is complete, you’ll have full access to Qualtrics. On future log-ins, you’ll be taken directly to the main screen for Qualtrics surveys.

If you are unable to set up an account using this method, you’ll need to contact the UA admins at qualtricshelp@uakron.edu.   This email should be sent from your UAkron email account.

The UA admins for Qualtrics will set up your account in that system and will reply by email.    In some cases, for additional security, you may be asked to provide your UA ID Number in addition to your UAnet ID.

Once the account is set up, you’ll be able to log in at:

http://akron.qualtrics.com

Questions?

Please visit the Akron Qualtrics site:  http://www.uakron.edu/it/instructional_services/dds/services/qualtrics.dot

or send email to: qualtricshelp@uakron.edu

Pulling a blog post to a dotCMS page

Sample code to pull events from a UAkron WordPress Blog (blogs.uakron.edu) to a dotCMS page

#pullRSSFeed('http://blogs.uakron.edu/bliss/feed/')
<h1>From the Bliss Institute Blog</h1>
#foreach($content in $list)
#set($rssTotal = 2)
#set($desc = "$!content.description")
#set($regex = '(\[\.\.\.\])')
#set($newstring = $desc.replaceAll($regex, "<a href=\"${content.link}\">&hellip;Read More</a>"))
<h3>
   <a href="$!content.link">$!content.title</a>
</h3>
 <p>$newstring</p>
#end

how to update OrgSync to grant permissions to update a group’s site

This is primarily to help the webteam gain access to a student group to facilitate updating the content for their site.

0. the webteam will need to request to join the site using the generic account.   The group admin will need to approve that account as a member.

1. Log into orgsync (http://www.uakron.edu/orgsync)
 
2. Go to Organizations, your organization
 
3. Click on People
 
4. Check the box next to the Webteam Orgsync account
 
5. On the permissions tab, select the Website, pages, photos and videos
 
6. Click Close to apply the changes.

Notify a member of the webteam so that site updates can be initiated.

How to create and post a poll from Qualtrics into your website

Log into your Qualtrics account at akron.qualtrics.com

Click Polls in the top menu

Click Create Poll

A range of options will be available on the left side of your screen. Make your settings accordingly.

After you are finished making your settings, look down under the poll settings and click the box that says save changes.

You will see a list of options for colors, size, font…etc. Adjusting these settings will adjust the overall design and look of your poll. When you are happy with your adjustments (if any), look for a box at the top of your poll that says add this poll to your website.

Click “add this poll to your website.”  Select and Copy the entire html code.

Remember, this is the HTML code you will need to paste into your website in order to embed your poll into dot cms.

Now, you are ready to paste that code into your department’s webpage.

WordPress Settings

Disabling Comments

We ran into an issue while creating the site for Hower House on the blog. We don’t want users to be able to comment on pages that are on a site when the information is purely informational, not interactive/blog related, etc. So, it’s not a perfect fix, but here is how we have disabled comments.

From the Dashboard go to Settings > Discussion. The two options we are changing in here are:

  • Under Default Article Settings – Uncheck the box saying “Allow people to post comments on new articles”
  • Under Other Comment Settings – check “Users must be registered and logged in to comment”
  • Under Before a comment appears – check “An administrator must always approve the comment”
From then on, comments must always be approved by an administrator before showing up, and nobody can comment unless they are able to sign in to wordpress. It’s quick and easy to do, although there is still a “Leave a Reply” area on each page. It just has a link to the login site there to allow you to try and log in for posting comments.

Photo Gallery Tutorial

This tutorial will cover how to set up a simple Photo Gallery in dotCMS. The photo callery will display as a listing of thumbnails that can then be clicked to display a full-sized image.

For an example of this, and a reference to the page that will be created throughout this tutorial, view this link: http://www.uakron.edu/webteam/tutorials/photo-gallery-example.dot

Step 1) Uploading the images for the photo gallery to a dotCMS folder.

Step 2) Place the appropriate code into the dotCMS web page to create a photo gallery.

Additional Options) More options that can be coded into the page to further add functionality to the Photo Gallery

Final Notes) Bugs and reminders about the Photo Gallery.


Step 1) Uploading the images for the photo gallery to a dotCMS folder.
Start off by navigating to the folder you have created in dotCMS to store images for this photo gallery. The screen should appear similar to this:

As the image suggests, we select +Add New in the top right corner:

Next, select Multiple Files to add files to this folder. The screen should appear similar to this:

Note: There are three items that are circled in red here.

  • First off, the Folder field needs to be written down for Step 2. For this example /webteam/tutorials/images/photo-gallery/ would be written down. Note: Make sure that to include have the final / in the Folder url or the Photo Gallery will not work.
  • Second, the Number of Files to Upload field is important. Set this to the number of images that need to be uploaded. (Be aware that only 19 images may be uploaded at a time. If there are more than that for the Photo Gallery, repeat this process until all photos are uploaded). For the example demonstrated 3 images will be uploaded.
  • Third, the Browse button, when clicked, opens a window that allows one to select the files on a computer to add to the folder.

For demonstration purposes, three images have been selected. The following example shows the third image being selected for upload. In any situation, the screen should appear similar to this:

Once all images have been selected, click Save and Publish to upload the files to the folder in dotCMS.


Step 2) Place the appropriate code into the dotCMS web page to create a photo gallery.

Open the page where the photo gallery will be placed. The screen should appear similar to this:

In the top right corner select +Add and then select New Content.

There are four items that are important here. As with any content, be sure to name the Title appropriately. The Body section is where the code goes. Notice at the bottom that Code is selected instead of WYSIWYG. These two lines of code must be entered in Code view. The fourth item circled is the actual code. Be sure to place this in the page:

#set($showPhotoTitle = false)
#photoGallery('/webteam/tutorials/images/photo-gallery/')

Notice that the Folder field that was written down earlier is placed between the two quotation marks. If the path to the folder was /example1/example2/example3/ the code would look like this:

#set($showPhotoTitle = false)
#photoGallery('/example1/example2/example3/')

Click Save and Publish once the Folder path has been correctly entered to finish the Photo Gallery. Example:

Before an image is clicked:

After an image is clicked:

For an example of this, visit the link: http://www.uakron.edu/webteam/tutorials/photo-gallery-example.dot

Additional Options) More options that can be coded into the page to further add functionality to the Photo Gallery.

The line of code that reads “#set($showPhotoTitle = false)” is what is called an additional option. It allows for further control of the Photo Gallery. The following are all additional options for the Photo Gallery:

showPhotoTitle: Set to false to hide the photo names from the listing. Default: true.

showSubgalleryTitle: Set to false to hide the sub galleries names from the listing. Default: true.

photoWidth: Width used to display the full image. Default: 600.

photoHeight: Height used to display the full image. Default: 450.

thumbnailWidth: Width used to display the thumbnails. Default: 90.

thumbnailHeight: Height used to display the thumbnails. Default: 90.


And this is how the code would look with these options:

#set($showPhotoTitle = false)
#set($showSubgalleryTitle = false)
#set($photoWidth = 600)
#set($photoHeight = 450)
#set($thumbnailWidth = 90)
#set($thumbnailHeight = 90)
#photoGallery('/webteam/tutorials/images/photo-gallery/')

Final Notes:

  1. As mentioned earlier in this tutorial, be sure to add the ending / to the Folder when placing it into code, or the Photo Gallery will not work.
  2. To add images to the Photo Gallery, simple repeat Step 1, uploading more images to the gallery’s folder. To remove images from the Photo Gallery, simply unpublish them from the folder that they are in.

Image Rotator Widget Tutorial

This tutorial will cover how to set up an Image Rotator using the Image Rotator widget in dotCMS. An Image Rotator is a simple slideshow that rotates through all the images in a folder and shows them on page.

Preparation: Make sure that you have saved all images you will be using for the slideshow to your computer. The images should all be of the same width and height or else the Image Rotator will not display correctly.

Step 1) Adding files to a folder that you have created. This folder is specifically used for images you want in your slideshow.

Step 2) Creating a new image rotator widget on your page and filling out the appropriate fields to make things appear properly on screen.

Final Notes) Limitations, bugs, and final thoughts over the widget.

For Reference: Throughout the tutorial I will be referencing the link below:
https://www.uakron.edu/webteam/tutorials/image-rotator-example.dot


Step 1) Create a new folder in dotCMS. This folder is where images will be uploaded to for the slideshow. Example:

Next, double click the folder to enter it. Then at the top select +Add New:

As the image shows, select Multiple Files. Next a screen will appear similar to this one:

Note: Two items have been circled in the above image. The Folder option is something that needs to be written down for Step 2. For the image above, /webteam/tutorials/images/rotator/ needs to be written down.

*Note: You must include the ending / when you write down the Folder option. /webteam/tutorials/images/rotator/ will work as a folder path while /webteam/tutorials/images/rotator will not.

The number of files to upload is self explanatory. This tutorial will be using three images. When 3 is selected a page similar to this appears:

For each file, an option is given to Choose File to upload. When that button is clicked the screen will look similar to this:

From that open window files to upload are individually selected.  Once all files have been selected, click Save and Publish.

The images uploaded now appear in dotCMS:



Step 2) Creating the New Widget

Open the page that the Image Rotator widget will be placed on. At the top right corner of the page select Add:


Next select the Add Widget option. The page will look similar to this:

As the image suggests, select Image Rotator. The screen will look similar to this:

In the top right corner click Create New Image Rotator to be taken to this screen:

All of the options circled above should be set in accordance with the needs of the individual slideshow. A brief explanation of each option:

Widget Title: The widget title is just the name used to identify the widget. The above example is using Example Image Rotator. Name appropriately.

Width and Heigh in Pixels: The width and height options are used to define the size of the widget, not the images. Set these options to the height and width of the images you have uploaded to dotCMS. The above examples uses 800 and 600 for width and height.

Path to Image Folder: This is the Folder option that we wrote down in step one. For the example /webteam/tutorials/images/rotator/ is used.

Randomize Images: Whether images appear randomly or in alphabetical order. Default is set to use alphabetical order.

Delay: The delay in seconds between rotation of images.

Once all options are configured, select Save and Publish to complete the creation of an Image Rotator widget.


If everything went as planned, a completed slideshow will be on page similar to the one found on this page:  https://www.uakron.edu/webteam/tutorials/image-rotator-example.dot


Final Notes:

1) Images should always be of the same size in a slideshow. The widget places them each back-to-back inside the page. For this reason, if an image’s width is smaller than the images around it, more than one image will bleed into the screen at a time, making the slideshow look bad.

2) As stated earlier in the tutorial, make sure to include the final / when writing down the Folder field from Step 1. The reason that ending / is so important is that it identifies the final word as a folder and not a file. /webteam/tutorials/images/rotator <– Notice the lack of an ending / in that folder path. dotCMS will identify rotator as a file and not a folder unless the final / is used. Like this: /webteam/tutorials/images/rotator/

Accordion Menu Tutorial

Today this tutorial will be explaining how to set up an accordion menu in dotCMS. An accordion menu is a menu with individual headings that, when clicked, expand to display additional information that relates to the heading. For reference to what an accordion menu looks and acts like, visit the link below. The link below also uses the exact code used  in this tutorial.

http://www.uakron.edu/webteam/tutorials/accordion-menu-example.dot

There are two steps in this tutorial.

Step 1 is accessing the Page Metadata section of your page and inserting code. This is a behind the scenes step and is something that does not get seen by users. Once step 1 has been completed, you do not have to repeat the step in order to effect the accordion menu in any way.

Step 2 is the actual code that will be creating and working with the Accordion Menu. Step two may need to be repeated in order to add more headings to your Accordion Menu.

Step 1) Accessing the Page Metadata.

Right click the page you wish to create an accordion menu on and select Page Properties. Your screen should look like this:

Click Page Properties

Click Advanced Properties next. The screen that appears will look like this:

Paste the code below into the Page Metadata section of your page:

<script type="text/javascript" src="/global/js/q_a.js"></script><script type="text/javascript" src="/global/js/jquery-ui/jquery-ui-1.8.2.accordion.min.js"></script>
<script type="text/javascript">// <![CDATA[
    $(function() {
        $("#accordion").accordion({ collapsible: true, active: 0, autoHeight: false } );
    });

// ]]></script>

Save your setting and move on to step 2.

Step 2) Page Code
Create a new piece of content on your page. Then, set the view mode to Code instead of WYSIWYG. Paste the code below into your page:

</pre>
<div id="accordion">
<h3><a href="#">Heading To Click and Expand</a></h3>
<div>Any and all content you want displayed after we click the heading</div>
</div>
<pre>

Note: The part that reads “Heading To Click and Expand” is where we will put titles of our headings for the menu. The part that reads “Any and all content you want displayed after we click the heading” is the actual content that will be under the heading when we click it. Example:

Before heading is clicked:

After heading is clicked:

Some Final Notes:
1) If you want to add more headings to your menu, it would look like this.

</pre>
<div id="accordion">
<h3><a href="#">Heading</a></h3>
<div>Content</div>
<h3><a href="#">Heading</a></h3>
<div>Content</div>
<h3><a href="#">Heading</a></h3>
<div>Content</div>
</div>
<pre>

The above example would have 3 heading items in the accordion menu. Each new heading item is specified with the <h3> tag.

2) You must use the <h3> tag to create heading items. No other tags will work, as the <h3> tag is specifically defined for this purpose in the CSS that is loaded onto the page.

3) It’s also important to mention than when you paste the page code into the new piece of content you’re creating, you will not actually see the accordion menu. You must save and publish content pieces before you may view them on the page in menu form.

4) There are more ways to increase functionality of the accordion menu. If you would like to know what these additional functions are/how to access them, send an email to web-team@lists.uakron.edu