Evenly presenting random terms within a sentence with one dependent on another

Hi Qualtrics community,

This is my first time diving into JS. I am building a survey where each question includes three separate terms describing a person (race, gender, and sexuality). Each term is randomly generated from a list of pre-entered values (race has four options, gender four, and sexuality two). The sentence at the beginning of each question reads: “Person is [race] [gender[ who identifies as [sexuality].” Based off of several other posts in this forum, I built the following JS and it is working great. However, I have three additional questions:

1. The way this is currently written, will the options for each of the three terms be presented evenly when randomized? If no, how to correct so that they are?
2. Is there a way to write this so that for the third term (sexuality), “gay” will be used when the second term (gender) includes “boy”, and “lesbian” will be used when the second term (gender) includes “girl”? Right now it is written as “gay/lesbian” and is generated as its own random term, independent of the second term.

Qualtrics.SurveyEngine.addOnReady(function()

{

/*Place your JavaScript here to run when the page is fully displayed*/

/*var order = "${e://Field/random1}"

Qualtrics.SurveyEngine.setEmbeddedData('random1', order);

document.getElementById("random1").innerHTML = order;*/

var words = ["an African American", "an Asian American", "a Latinx", "a Caucasian"]; //Your words

var i = Math.floor(Math.random() * words.length); //randomly select an index

var my_word = words[i]; //select a word

Qualtrics.SurveyEngine.setEmbeddedData( 'words', my_word); //Send the word to the Qualtrics output, otherwise you would not know which participant get which word

//Qualtrics.SurveyEngine.getEmbeddedData('words')

document.getElementById("random1").innerHTML = my_word; //show the word to respondents

var words1 = ["cisgender girl", "transgender girl", "cisgender boy", "transgender boy"]; //Your words

var i = Math.floor(Math.random() * words1.length); //randomly select an index

var my_word1 = words1[i]; //select a word

Qualtrics.SurveyEngine.setEmbeddedData( 'words1', my_word1); //Send the word to the Qualtrics output, otherwise you would not know which participant get which word

document.getElementById("random2").innerHTML = my_word1; //show the word to respondents

var words2 = ["heterosexual", "gay/lesbian"]; //Your words

var i = Math.floor(Math.random() * words2.length); //randomly select an index

var my_word2 = words2[i]; //select a word

Qualtrics.SurveyEngine.setEmbeddedData( 'words2', my_word2); //Send the word to the Qualtrics output, otherwise you would not know which participant get which word

document.getElementById("random3").innerHTML = my_word2; //show the word to respondents

});

3.  I am also wondering how to make this sentence appear to participants as a single line, rather than with breaks after each generated term. Right now it looks like this when I preview the survey:

Person is

.

.

who identifies as

.

This is the HTML element I am using: Person is <div id="random1">.</div> <div id="random2">.</div> who identifies as <div id="random3">.</div>. 

Any suggestions how to remove the line breaks? I tried   to no avail.

Thanks for any thoughts.