Article Experiment

This is a base template for displaying single news articles for use in various ENP research experiments. You can see an example of the page at https://thenewsbeat.org/trust-indicators/articles/us-demographic-shift-will-have-huge-political-impact/

Structure

config.json is where most of the work will happen. A few constants get set there that are the basis for the study. What variation of the study you get is based on query parameters in the URL, like /?author_photo=personal&author_bio=basic. Then constants get set based on those parameters. Use the root / as the control for the study.

See config-example.json for details on how to use the config.json file.

The templating structure is manual, but simple. To create a new article, copy and paste one of the existing articles in the /articles/ directory then rename it to the name of your article, such as /my-new-article/.

Then, replace the content in /articles/my-new-article/data.php. The variables set in data.php will get passed to the template files. data.php basically serves as a way to avoid setting up an actual database for each new experiment since the project is small. If you were to use this system to build an actual CMS, you’d want to use a database.

Commenting

Comments just log to a file via Javascript, not a database. They’re only submitted via AJAX through /assets/js/post-with-comments.js.

Tracking

All clicks on buttons or links are tracked via Google Analytics and pass the button or link identifier, as well as which article the click came from.

Local Set-up

We’re using Gulp to compile. Run npm install from your project directory to install the node modules from package.json. Install (Laravel Valet)[https://laravel.com/docs/10.x/valet#installation] on your local machine and run valet park & valet link from your project directory. Lastly, run gulp on the command line from the project directory to serve the project up via localhost with BrowserSync.

When Finished

Make sure to update the article-list.html file with links to all of your articles

FTP Connection

• More on File Transfer Protocol

1. Create an empty directory that you wish to first download the contents of the remote server. Open that directory in VS Code.
2. Download the VS Code SFTP extension for VS Code.
3. Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on Mac open command palette, run SFTP: config command.
4. Sync your local directory with the remote folder. Open the command palette again and choose SFTP: Download Project. This will download the directory shown in the remotePath setting in sftp.json to your local open directory. Example:

{
    "name": "[your chosen name]",
    "host": "ftp.stroudresearch.net",
    "protocol": "ftp",
    "port": 21,
    "username": "[FTP username]",
    "password": "[FTP password]",
    "remotePath": "/public_html/NewsBeat/2023-article-experiment",
    "uploadOnSave": false, <--- you can set this to true
    "ignore": [
        ".vscode",
        ".git",
        ".DS_Store",
        "/node_modules"
    ]
}

Project leader will create these for you on the hosting account:

[FTP username] - replace with [FTP username]

[FTP password] - replace with [FTP password]

Live files

What files & folders should be pushed to the live hosting account.Only these folders & files need to be updated on the hosting public_html/NewsBeat/ folder.

Connection to server

Authenticated users can connect via FFTP with private instructions listed on utexas.edu CME Stache page.

Caching and Hosting

Experiments are found at http://thegazettestar.com/. On the stroudresearch.net GoDaddy account the site folder directory is at /public_html/NewsBeat/. If you need to change the forwarding address go to GoDaddy/Domains/thegazettestar.com/DNS/Fowarding and update the Destination.

To prevent caching of HTML documents, add the following line to your .htaccess file:

Header set Cache-Control "no-cache, no-store, must-revalidate"

This sets the Cache-Control header to include the directives no-cache, no-store, and must-revalidate, which instruct browsers and intermediate caches not to cache the HTML documents.

Links

Comments on survey and stimuli Google Doc

Qualtrics Survey Implementation

Question embed example code:

<a id="gazette_iframeCover"></a>
<iframe id="gazette_star" src='https://www.stroudresearch.net/NewsBeat/2023-article-experiment/articles/solidarity/?explain_box=none' style='height: 1715px; width: 750px; margin-left: auto; margin-right: auto;border:0;'></iframe>

<a id="gazette_iframeCover"></a> - prevents user from clicking

Qualtrics JS code:

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/
	var elem = document.getElementById('gazette_iframeCover');
	console.log(elem);
	var inputBox = document.getElementById('QR~QID93');
	console.log(inputBox);

	function replaceText() {
		elem.style.display = "none";
		var textContent = "Clicked Decision Tree";
		inputBox.value = textContent;
	}
	elem.addEventListener("click", replaceText, false);
	
});

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/


	  // document.getElementById('QR~QID93').value="this";



});

Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Place your JavaScript here to run when the page is unloaded*/

});