Tiffany Luong

Example Talk

Sat, 01 Jun 2030 13:00:00 +0000

Click on the Slides button above to view the built-in slides feature.

Slides can be added in a few ways:

Create slides using Hugo Blox Builder’s Slides feature and link using slides parameter in the front matter of the talk file
Upload an existing slide deck to static/ and link using url_slides parameter in the front matter of the talk file
Embed your slides (e.g. Google Slides) or presentation video on this page using shortcodes.

Further event details, including page elements such as image galleries, can be added to the body of this page.

HistoLab VR: A User Elicitation Study Exploring the Potential of Virtual Reality Game-based Learning for Hazard Awareness

Wed, 09 Oct 2024 00:00:00 +0000

Projects

Sun, 19 May 2024 00:00:00 +0000

Detecting Users' Emotional States during Passive Social Media Use

Wed, 15 May 2024 00:00:00 +0000

🎉 Easily create your own simple yet highly customizable blog

Fri, 27 Oct 2023 00:00:00 +0000

Welcome 👋

Table of Contents

Overview

The Hugo Blox website builder for Hugo, along with its starter templates, is designed for professional creators, educators, and teams/organizations - although it can be used to create any kind of site
The template can be modified and customised to suit your needs. It’s a good platform for anyone looking to take control of their data and online identity whilst having the convenience to start off with a no-code solution (write in Markdown and customize with YAML parameters) and having flexibility to later add even deeper personalization with HTML and CSS
You can work with all your favourite tools and apps with hundreds of plugins and integrations to speed up your workflows, interact with your readers, and much more

Get Started

👉 Create a new site
📚 Personalize your site
💬 Chat with the Hugo Blox community or Hugo community
🐦 Twitter: @GetResearchDev @GeorgeCushen #MadeWithHugoBlox
💡 Request a feature or report a bug for Hugo Blox
⬆️ Updating Hugo Blox? View the Update Guide and Release Notes

Crowd-funded open-source software

To help us develop this template and software sustainably under the MIT license, we ask all individuals and businesses that use it to help support its ongoing maintenance and development via sponsorship.

As a token of appreciation for sponsoring, you can unlock these awesome rewards and extra features 🦄✨

Ecosystem

Bibtex To Markdown: Automatically import publications from BibTeX

Inspiration

Learn what other creators are building with this template.

Features

Page builder - Create anything with no-code blocks and elements
Edit any type of content - Blog posts, publications, talks, slides, projects, and more!
Create content in Markdown, Jupyter, or RStudio
Plugin System - Fully customizable color and font themes
Display Code and Math - Code syntax highlighting and LaTeX math supported
Integrations - Google Analytics, Disqus commenting, Maps, Contact Forms, and more!
Beautiful Site - Simple and refreshing one-page design
Industry-Leading SEO - Help get your website found on search engines and social media
Media Galleries - Display your images and videos with captions in a customizable gallery
Mobile Friendly - Look amazing on every screen with a mobile friendly version of your site
Multi-language - 35+ language packs including English, 中文, and Português
Multi-user - Each author gets their own profile page
Privacy Pack - Assists with GDPR
Stand Out - Bring your site to life with animation, parallax backgrounds, and scroll effects
One-Click Deployment - No servers. No databases. Only files.

Themes

Hugo Blox and its templates come with automatic day (light) and night (dark) mode built-in. Visitors can choose their preferred mode by clicking the sun/moon icon in the header.

Choose a stunning theme and font for your site. Themes are fully customizable.

License

Released under the MIT license.

🧠 Sharpen your thinking with a second brain

Thu, 26 Oct 2023 00:00:00 +0000

Create a personal knowledge base and share your knowledge with your peers.

Hugo Blox web framework empowers you with one of the most flexible note-taking capabilities out there.

Create a powerful knowledge base that works on top of a local folder of plain text Markdown files.

Use it as your second brain, either publicly sharing your knowledge with your peers via your website, or via a private GitHub repository and password-protected site just for yourself.

Mindmaps

Hugo Blox supports a Markdown extension for mindmaps.

With this open format, can even edit your mindmaps in other popular tools such as Obsidian.

Simply insert a Markdown code block labelled as markmap and optionally set the height of the mindmap as shown in the example below.

Mindmaps can be created by simply writing the items as a Markdown list within the markmap code block, indenting each item to create as many sub-levels as you need:


```markmap {height="200px"}
- Hugo Modules
- Hugo Blox
- blox-plugins-netlify
- blox-plugins-netlify-cms
- blox-plugins-reveal
```

renders as

- Hugo Modules
- Hugo Blox
- blox-plugins-netlify
- blox-plugins-netlify-cms
- blox-plugins-reveal

Anh here’s a more advanced mindmap with formatting, code blocks, and math:


```markmap
- Mindmaps
- Links
- [Hugo Blox Docs](https://docs.hugoblox.com/)
- [Discord Community](https://discord.gg/z8wNYzb)
- [GitHub](https://github.com/HugoBlox/hugo-blox-builder)
- Features
- Markdown formatting
- **inline** ~~text~~ *styles*
- multiline
text
- `inline code`
-
```js
console.log('hello');
console.log('code block');
```
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
```

renders as

- Mindmaps
- Links
- [Hugo Blox Docs](https://docs.hugoblox.com/)
- [Discord Community](https://discord.gg/z8wNYzb)
- [GitHub](https://github.com/HugoBlox/hugo-blox-builder)
- Features
- Markdown formatting
- **inline** ~~text~~ *styles*
- multiline
text
- `inline code`
-
```js
console.log('hello');
console.log('code block');
```
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$

Highlighting

Highlight important text with mark:

<mark>Highlighted text</mark>

Callouts

Use callouts (aka asides, hints, or alerts) to draw attention to notes, tips, and warnings.

By wrapping a paragraph in {{% callout note %}} ... {{% /callout %}}, it will render as an aside.

{{% callout note %}}
A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
{{% /callout %}}

renders as

A Markdown aside is useful for displaying notices, hints, or definitions to your readers.

Or use the warning callout type so your readers don’t miss critical details:

A Markdown aside is useful for displaying notices, hints, or definitions to your readers.

📈 Communicate your results effectively with the best data visualizations

Wed, 25 Oct 2023 00:00:00 +0000

Hugo Blox is designed to give technical content creators a seamless experience. You can focus on the content and Hugo Blox handles the rest.

Use popular tools such as Plotly, Mermaid, and data frames.

Charts

Hugo Blox supports the popular Plotly format for interactive data visualizations. With Plotly, you can design almost any kind of visualization you can imagine!

Save your Plotly JSON in your page folder, for example line-chart.json, and then add the {{< chart data="line-chart" >}} shortcode where you would like the chart to appear.

Demo:

You might also find the Plotly JSON Editor useful.

Diagrams

Hugo Blox supports the Mermaid Markdown extension for diagrams.

An example flowchart:

```mermaid
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```

renders as

graph TD A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2]

An example sequence diagram:

```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```

renders as

sequenceDiagram Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

An example class diagram:

```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```

renders as

classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label

An example state diagram:

```mermaid
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```

renders as

stateDiagram [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]

Data Frames

Save your spreadsheet as a CSV file in your page’s folder and then render it by adding the Table shortcode to your page:

{{< table path="results.csv" header="true" caption="Table 1: My results" >}}

renders as

Table 1: My results
customer_id	score
1	0
2	0.5
3	1

👩🏼‍🏫 Teach academic courses

Tue, 24 Oct 2023 00:00:00 +0000

Hugo Blox Builder is designed to give technical content creators a seamless experience. You can focus on the content and the Hugo Blox Builder which this template is built upon handles the rest.

Embed videos, podcasts, code, LaTeX math, and even test students!

On this page, you’ll find some examples of the types of technical content that can be rendered with Hugo Blox.

Video

Teach your course by sharing videos with your students. Choose from one of the following approaches:

Youtube:

{{< youtube D2vj0WcvH5c >}}

Bilibili:

{{< bilibili BV1WV4y1r7DF >}}

Video file

Videos may be added to a page by either placing them in your assets/media/ media library or in your page’s folder, and then embedding them with the video shortcode:

{{< video src="my_video.mp4" controls="yes" >}}

Podcast

You can add a podcast or music to a page by placing the MP3 file in the page’s folder or the media library folder and then embedding the audio on your page with the audio shortcode:

{{< audio src="ambient-piano.mp3" >}}

Try it out:

Test students

Provide a simple yet fun self-assessment by revealing the solutions to challenges with the spoiler shortcode:

{{< spoiler text="👉 Click to view the solution" >}}
You found me!
{{< /spoiler >}}

renders as

👉 Click to view the solution

You found me 🎉

Math

Hugo Blox Builder supports a Markdown extension for $\LaTeX$ math. Enable math by setting the math: true option in your page’s front matter, or enable math for your entire site by toggling math in your config/_default/params.yaml file:

features:
 math:
 enable: true

To render inline or block math, wrap your LaTeX math with $...$ or $$...$$, respectively.

Example math block:

$$
\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}
$$

renders as

$$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}$$

Example inline math $\nabla F(\mathbf{x}_{n})$ renders as $\nabla F(\mathbf{x}_{n})$.

Example multi-line math using the math linebreak (\\):

$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\
1-p_{0}^{*} & \text{if }k=0.\end{cases}$$

renders as

$$ f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\ 1-p_{0}^{*} & \text{if }k=0.\end{cases} $$

Code

Hugo Blox Builder utilises Hugo’s Markdown extension for highlighting code syntax. The code theme can be selected in the config/_default/params.yaml file.

```python
import pandas as pd
data = pd.read_csv("data.csv")
data.head()
```

renders as

import pandas as pd
data = pd.read_csv("data.csv")
data.head()

Inline Images

{{< icon name="python" >}} Python

renders as

Python

Experience

Tue, 24 Oct 2023 00:00:00 +0000

✅ Manage your projects

Mon, 23 Oct 2023 00:00:00 +0000

Easily manage your projects - create ideation mind maps, Gantt charts, todo lists, and more!

Ideation

Hugo Blox supports a Markdown extension for mindmaps.

Simply insert a Markdown code block labelled as markmap and optionally set the height of the mindmap as shown in the example below.

Mindmaps can be created by simply writing the items as a Markdown list within the markmap code block, indenting each item to create as many sub-levels as you need:


```markmap {height="200px"}
- Hugo Modules
- Hugo Blox
- blox-plugins-netlify
- blox-plugins-netlify-cms
- blox-plugins-reveal
```

renders as

- Hugo Modules
- Hugo Blox
- blox-plugins-netlify
- blox-plugins-netlify-cms
- blox-plugins-reveal

Diagrams

Hugo Blox supports the Mermaid Markdown extension for diagrams.

An example Gantt diagram:

```mermaid
gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
```

renders as

gantt section Section Completed :done, des1, 2014-01-06,2014-01-08 Active :active, des2, 2014-01-07, 3d Parallel 1 : des3, after des1, 1d Parallel 2 : des4, after des1, 1d Parallel 3 : des5, after des3, 1d Parallel 4 : des6, after des4, 1d

Todo lists

You can even write your todo lists in Markdown too:

- [x] Write math example
 - [x] Write diagram example
- [ ] Do something else

renders as

Write math example
- Write diagram example
Do something else

Controllers or Bare Hands? A Controlled Evaluation of Input Techniques on Interaction Performance and Exertion in Virtual Reality

Mon, 09 Oct 2023 00:00:00 +0000

ViGather: Inclusive Virtual Conferencing with a Joint Experience Across Traditional Screen Devices and Mixed Reality Headsets

Wed, 13 Sep 2023 00:00:00 +0000

InfinitePaint: Painting in Virtual Reality with Passive Haptics Using Wet Brushes and a Physical Proxy Canvas

Wed, 26 Apr 2023 00:00:00 +0000

VR Grand Piano

Fri, 03 Mar 2023 00:00:00 +0000

I created a virtual grand piano on 3ds Max and integrated it into Unity to use it with my MIDI keyboard, allowing me to play music on a grand piano from anywhere. Inspired by the stunning anime ‘Shigatsu wa Kimi no Uso’ (English name: ‘Your Lie in April’), I designed a virtual environment to immerse myself in while playing.

The goal is to integrate this project with VR and/or MR.

Currently a work-in-progress, I plan to add real-time changes to the environment and particles based on the music being played.

Special thanks to Alexandre for his invaluable help!

You can check out some videos, screenshots and rendering for now.

A video of the piano animation when playing this [midi file] (https://onlinesequencer.net/2285176):

The cherry blossom petal particles and water ripple shader by Alexandre:

Screenshots:

Characterizing Physiological Responses to Fear, Frustration, and Insight in Virtual Reality

Mon, 24 Oct 2022 00:00:00 +0000

Demographic and Behavioral Correlates of Cybersickness: A Large Lab-in-the-Field Study of 837 Participants

Thu, 20 Oct 2022 00:00:00 +0000

ComforTable User Interfaces: Surfaces Reduce Input Error, Time, and Exertion for Tabletop and Mid-air User Interfaces

Mon, 17 Oct 2022 00:00:00 +0000

Experiencing Herd Immunity in Virtual Reality Increases COVID‑19 Vaccination Intention

Tue, 06 Sep 2022 00:00:00 +0000

Virtual Reality Reduces COVID‑19 Vaccine Hesitancy in the Wild: A Randomized Trial

Sun, 06 Feb 2022 00:00:00 +0000

A Self-Administered Virtual Reality Intervention Increases COVID-19 Vaccination Intention

Sat, 06 Nov 2021 00:00:00 +0000

A Survey on Affective and Cognitive VR

Mon, 06 Sep 2021 00:00:00 +0000

Towards the Exploitation of Mental Workload in Virtual Reality Systems

Thu, 14 Jan 2021 00:00:00 +0000

Towards Real-Time Recognition of Users’ Mental Workload Using Integrated Physiological Sensors Into a VR HMD

Fri, 06 Nov 2020 00:00:00 +0000

3Dexterity: Finding Your Place in a 3-Armed World

Fri, 06 Mar 2020 00:00:00 +0000

Introducing Mental Workload Assessment for the Design of Virtual Reality Training Scenarios

Fri, 06 Mar 2020 00:00:00 +0000

Einstein's General Relativity Theory

Sun, 19 May 2019 00:00:00 +0000

At a 4-day VR/MR hackathon organized by Inria Rennes with a focus on education, we developed an interactive VR scenario to introduce users, starting from 12 years old, to the General Relativity theory.

The scenario begins with the player in a desolate, lifeless Earth. They soon discover a spaceship controlled by a playful AI named Doppler, and are greeted by a hologram of Prof. Einstein who introduces the theory and guides the user on an interactive space and time travel experience to escape from Earth.

Throughout the journey, users engage in many interactive elements that illustrate the concepts of General Relativity. To enhance the experience, we utilized the amazing music from the Ghosts albums by Nine Inch Nails and the voiceover work of Anatole, who voiced Einstein.

You can check out the gameplay video below to see how the scenario unfolds:

Pyramid Escape: Design of Novel Passive Haptics Interactions for an Immersive and Modular Scenario

Wed, 06 Mar 2019 00:00:00 +0000

Studying the Mental Effort in Virtual Versus Real Environments

Wed, 06 Mar 2019 00:00:00 +0000

Toward Intuitive 3D User Interfaces for Climbing, Flying and Stacking

Tue, 06 Mar 2018 00:00:00 +0000

The Labyrinth of Harry Potter and the Goblet of Fire

Fri, 05 May 2017 00:00:00 +0000

Our team developed an immersive VR application based on Harry Potter and the Goblet of Fire, where users must navigate a labyrinth to find the Goblet. The app was developped in the context of a 4-day VR/MR hackaton organized by Inria Rennes on the theme “cinema” and won the first prize.

In this magical world, users are equipped with a wand and can cast spells by making the correct gestures. Lumos allows them to use their wand as a flashlight, Wingardium Leviosa to levitate objects, Alohomora to open doors, and Patronus to defend against Dementors.

To enhance users’ sense of presence in the virtual environment, we employed impossible spaces techniques (as described in Yu et al.’s Bookshelf and Bird’s paper) to create a seamless and natural walking experience.

To further immerse users in the wizarding world, we incorporated various stressors, such as fog, spiders, and dementors, to create a more engaging experience.

Drop the Base

Sun, 05 Feb 2017 00:00:00 +0000

Drop the Base is an immersive educational VR application designed to teach basic physics formulas to middle and high school students in an engaging and interactive way.

Developed in just 30 hours for the Virtual Fantasy Limited Time challenge at Laval Virtual in 2017 (Laval, France), the app won first prize for its utility in education and fun user experience. It is a collaborative application that uses both a VR headset and an android tablet.

In the app’s first section, students are transported to a VR classroom where they can experience real-time simulations of fundamental physics equations (e.g., heat equation to melt ice or Maxwell’s magnetic field to move objects). The teacher can use the android tablet to display equations on the board of the VR classroom and adjust parameters to demonstrate their consequences on objects in the student’s environment in real-time.

In the second part of the app, students must apply the lessons they’ve learned in the classroom to escape three different rooms. By using the right equations with the right parameters, students can solve puzzles and progress through the game.

Video of app:

Immunis

Mon, 28 Nov 2016 00:00:00 +0000

We created an exciting tower defense game to learn about the immunity system set in a vibrant, cartoonish VR environment over the course of two weeks.

Players placed immune system cells and strategically deployed T-cell weapons to fend off waves of attacking bacteria and viruses.

We unfortunately didn’t capture many visuals of the project (just know that we designed some awesome shaders to create a kid-friendly aesthetic that we were really proud of). (You can glimpse at the silhouette of some of the cells I modelled in the poster above).

Check out a sample of the visuals with this cool natural killer cell designed by our teammate, Edouard, here.

I’ll update this page with more project materials if they become available.

Tiffany Luong

Example Talk

HistoLab VR: A User Elicitation Study Exploring the Potential of Virtual Reality Game-based Learning for Hazard Awareness

Projects

Detecting Users' Emotional States during Passive Social Media Use

🎉 Easily create your own simple yet highly customizable blog

Overview

Get Started

Crowd-funded open-source software

❤️ Click here to become a sponsor and help support Hugo Blox’s future ❤️

Ecosystem

Inspiration

Features

Themes

License

🧠 Sharpen your thinking with a second brain

Mindmaps

Highlighting

Callouts

Did you find this page helpful? Consider sharing it 🙌

📈 Communicate your results effectively with the best data visualizations

Charts

Diagrams

Data Frames

Did you find this page helpful? Consider sharing it 🙌

👩🏼‍🏫 Teach academic courses

Video

Podcast

Test students

Math

Code

Inline Images

Did you find this page helpful? Consider sharing it 🙌

Experience

✅ Manage your projects

Ideation

Diagrams

Todo lists

Did you find this page helpful? Consider sharing it 🙌

Controllers or Bare Hands? A Controlled Evaluation of Input Techniques on Interaction Performance and Exertion in Virtual Reality

ViGather: Inclusive Virtual Conferencing with a Joint Experience Across Traditional Screen Devices and Mixed Reality Headsets

InfinitePaint: Painting in Virtual Reality with Passive Haptics Using Wet Brushes and a Physical Proxy Canvas

VR Grand Piano

Characterizing Physiological Responses to Fear, Frustration, and Insight in Virtual Reality

Demographic and Behavioral Correlates of Cybersickness: A Large Lab-in-the-Field Study of 837 Participants

ComforTable User Interfaces: Surfaces Reduce Input Error, Time, and Exertion for Tabletop and Mid-air User Interfaces

Experiencing Herd Immunity in Virtual Reality Increases COVID‑19 Vaccination Intention

Virtual Reality Reduces COVID‑19 Vaccine Hesitancy in the Wild: A Randomized Trial

A Self-Administered Virtual Reality Intervention Increases COVID-19 Vaccination Intention

A Survey on Affective and Cognitive VR

Towards the Exploitation of Mental Workload in Virtual Reality Systems

Towards Real-Time Recognition of Users’ Mental Workload Using Integrated Physiological Sensors Into a VR HMD

3Dexterity: Finding Your Place in a 3-Armed World

Introducing Mental Workload Assessment for the Design of Virtual Reality Training Scenarios

Einstein's General Relativity Theory

Pyramid Escape: Design of Novel Passive Haptics Interactions for an Immersive and Modular Scenario

Studying the Mental Effort in Virtual Versus Real Environments

Toward Intuitive 3D User Interfaces for Climbing, Flying and Stacking

The Labyrinth of Harry Potter and the Goblet of Fire

Drop the Base

Immunis